jquery实现左右轮播切换效果

2023-09-18 13:02:05 62

/*banner部分*/ #banner{ width:960px; height:384px; overflow:hidden; position:relative; } #bannerul.banner-img{ position:absolute;left:0; } #bannerul.banner-img>li{float:left;width:960px;} #bannerul.banner-imgimg{ width:960px; height:384px; } #bannera.ck-slide{ position:absolute; top:150px; width:35px; height:70px; border-radius:3px; background:#000; opacity:0.15; transition:all.3slinear; } #bannera.ck-left{ left:40px; background:#000url(../img/index/arrow-left.png)no-repeatcentercenter; } #bannera.ck-right{ right:0px; background:#000url(../img/index/arrow-right.png)no-repeatcentercenter; } #bannera.ck-slide:hover{ opacity:0.3; } #bannerul.indicators{ position:absolute; bottom:10px; left:50%; margin-left:-34px; list-style:none; } #bannerul.indicatorsli{ width:12px; height:12px; background:#fff; border-radius:50%; float:left; margin-right:5px; transition:all.2slinear; } #bannerul.indicatorsli:hover,#bannerul.indicatorsli.hover{ cursor:pointer; background-color:#0AA1ED; }

$(()=>{ $.ajax({ type:"get", url:"php/xz.php", dataType:"json" }).then(data=>{ console.log(data); varhtml=""; constLIWIDTH=960; for(varitemofdata){ html+=`

`; } html+=`

`; console.log(html); var$ulImg=$(".banner-img"); $ulImg.html(html).css("width",LIWIDTH*(data.length+1)); var$ids=$(".indicators"); $ids.html("

".repeat(data.length)).children().first().addClass("hover"); constWAIT=2000,DURA=1000; varmoved=0,timer=null; functionmove(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"); }) } vartimer=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); vari=$li.index(); moved=i; $ulImg.stop(true).animate({ left:-LIWIDTH*moved },DURA,()=>{ $ids.children(":eq("+i+")") .addClass("hover") .siblings().removeClass("hover"); }) }); }) })

jquery实现左右轮播切换效果

热门推荐

随机推荐