本文实例为大家分享了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%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);
}
);
$(\"[data-move=right]\").click(()=>{
//防止动画叠加
/*clearInterval(timer);
timer=null;
move();
timer=setInterval(move,WAIT);*/
if(!$ulImg.is(\":animated\"))
move();
});
$(\"[data-move=left]\").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)); ?>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
© 版权声明
THE END
暂无评论内容