轮播图左右按钮js（在jquery中如何实现左右轮播切换）

本文目录

• 在jquery中如何实现左右轮播切换
• JS如何实现左右滚动轮播代码详细点

在jquery中如何实现左右轮播切换

这篇文章主要为大家详细介绍了jquery实现左右轮播切换效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了jquery实现左右轮播切换效果展示的具体代码，供大家参考，具体内容如下
html:
《!DOCTYPE html》
《html lang="en"》
《head》
《meta charset="UTF-8"》
《title》Document《/title》
《link rel="stylesheet" href="css/banner.css" rel="external nofollow" 》
《/head》
《body》
《p id="banner"》
《!-- 图片区域 --》
《ul class="banner-img"
data-load="bannerImgs"》
《!--
《li》
《a href="${product-details.html?lid=28}" rel="external nofollow" 》
《img src="${img/index/banner1.png}"》
《/a》
《/li》
--》
《li style="left:50%;"》
《img src="img/index/banner1.png"》
《/li》
《/ul》
《!--左右方向按钮--》
《a href="javascript:;" class="ck-slide ck-left" data-move="left"》《/a》
《a href="javascript:;" class="ck-slide ck-right" data-move="right"》《/a》
《!--导航小圆点--》
《ul class="indicators" data-load="bannerInds"》
《!-- 《li》《/li》 --》
《/ul》
《/p》

《script src="js/jquery.min.js"》《/script》
《script src="js/banner.js"》《/script》
《/body》
《/html》css：
/*banner部分*/
#banner{
width:960px;
height:384px;
overflow:hidden;
position:relative;
}
#banner ul.banner-img{
position:absolute; left:0;
}
#banner ul.banner-img》li{float:left;width:960px;}
#banner ul.banner-img img{
width:960px;
height:384px;
}
#banner a.ck-slide{
position:absolute;
top:150px;
width:35px;
height:70px;
border-radius:3px;
background:#000;
opacity:0.15;
transition:all .3s linear;
}
#banner a.ck-left{
left:40px;
background: #000 url(../img/index/arrow-left.png) no-repeat center center;
}
#banner a.ck-right{
right:0px;
background:#000 url(../img/index/arrow-right.png) no-repeat center center;
}
#banner a.ck-slide:hover{
opacity:0.3;
}
#banner ul.indicators{
position:absolute;
bottom:10px;
left:50%;
margin-left:-34px;
list-style: none;
}
#banner ul.indicators li{
width:12px;
height:12px;
background:#fff;
border-radius:50%;
float:left;
margin-right:5px;
transition:all .2s linear;
}
#banner ul.indicators li:hover,#banner ul.indicators li.hover{
cursor:pointer;
background-color:#0AA1ED;
} js：
$(()=》{
$.ajax({
type:"get",
url:"php/xz.php",
dataType:"json"
}).then(data=》{
console.log(data);
var html="";
const LIWIDTH=960;
for(var item of data){
html+=`《li》
《a href="${item.href}" rel="external nofollow" title="${item.title}"》
《img src="${item.img}"》
《/a》
《/li》`;
}
html+=`《li》
《a href="${data.title}"》
《img src="${data.img}"》
《/a》
《/li》`;
console.log(html);
var $ulImg=$(".banner-img");
$ulImg.html(html).css("width",LIWIDTH*(data.length+1));

var $ids=$(".indicators");

$ids.html("《li》《/li》".repeat(data.length)).children().first().addClass("hover");

const WAIT=2000,DURA=1000;
var moved=0,timer=null;
function move(dir=1){
moved+=dir;
console.log("moved="+moved);

$ulImg.animate({
left:-LIWIDTH*moved
},DURA,()=》{
if(moved%data.length==0){
moved=0;
$ulImg.css("left",0);
}
$ids.children(`li:eq(${moved})`).addClass("hover").siblings().removeClass("hover");
})
}

var timer=setInterval(move,WAIT);

$(’#banner’).hover(
()=》{ //这个是什么？
clearInterval(timer),
timer=null;
},
()=》{
timer=setInterval(move,WAIT);
}
);

$("").click(()=》{
//防止动画叠加
/*clearInterval(timer);
timer=null;
move();
timer=setInterval(move,WAIT);*/
if(!$ulImg.is(":animated"))
move();
});

$("").click(()=》{
if(!$ulImg.is(":animated")){
if(moved==0){
$ulImg.css("left",-LIWIDTH*data.length);
moved=data.length;
}
move(-1);
}
});

$ids.on("mouseover","li",function(){
var $li=$(this);
var i=$li.index();
moved=i;
$ulImg.stop(true).animate({
left:-LIWIDTH*moved
},DURA,()=》{
$ids.children(":eq("+i+")")
.addClass("hover")
.siblings().removeClass("hover");
})
});
})
})php：
《?php

header("Content-type:application/json");
require_once("init.php");

$sql="SELECT img,title,href FROM xz_index_carousel";
$result=mysqli_query($conn,$sql);
echo json_encode(mysqli_fetch_all($result,1));
?》上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
详细介绍Vue数据绑定
关于网站生成章节目录代码示例
在Bootstrap框架里使用treeview如何实现动态加载数据
在vue中如何实现跳转到之前页面

JS如何实现左右滚动轮播代码详细点

var datas = [
{imgSrc:"（图片 ）"},
{imgSrc:"（图片 ）"},
{imgSrc:"（图片 ）"},
{imgSrc:"（图片 ）"},
{imgSrc:"（图片 ）"},
{imgSrc:"（图片 ）"}
];
var banner = document.getElementById("banner");
var list = document.getElementById("list");
for(var i = 0,len = datas.length;i《len;i++){
var div = document.createElement("div");
var li = document.createElement("li");
if(i==0){ //默认第一项轮播项显示 对应的控制按钮被选中
div.className = "item active";
li.className = "active";
}else{ //其他项隐藏 其他的控制按钮样式不改变
div.className = "item";
li.className = "";
}
div.innerHTML = ’《a href="’ + datas.targetSrc + ’"》’ +
’《img src="’ + datas.imgSrc + ’" /》’ +
’《/a》’;
li.innerHTML = i + 1;
banner.appendChild(div);
list.appendChild(li);
}
var lunBo = document.getElementById("lunBo");
var items = document.querySelectorAll("#lunBo #banner .item");
var lis = document.querySelectorAll("#lunBo #list li");
var currentIndex = 0;//(控制按钮和轮播项共同的索引)
for(var i = 0,len = lis.length;i《len;i++){
lis.index = i;
lis.onmouseenter = function(){
currentIndex = this.index;
for(var j = 0;j《len;j++){
lis.className = "";
items.className = "item";
}
this.className = "active";
items.className = "item active";
}
}
var termId; //全局变量
function autoPlay(){
termId = setInterval(function(){
currentIndex++;
if(currentIndex==lis.length){
currentIndex = 0;
}
lis.onmouseenter();
},3000);
}
autoPlay();//打开页面自动轮播
//鼠标进入停止轮播
lunBo.onmouseenter = function(){
clearInterval(termId);
}
//鼠标离开继续轮播
lunBo.onmouseleave = function(){
autoPlay();
}
我这还有其他的，先采纳一下加我，我给你发