本文实例为大家分享了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>
<div 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>
</div>
<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[0].href}" rel="external nofollow" title="${data[0].title}">
<img src="${data[0].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