js实现简单的无缝轮播效果

2023-07-17 03:58:04 212

*{ margin:0; padding:0; } #box{ width:500px; height:200px; padding:5px; margin:50pxauto; border:1pxsolid#999999; } .inner{ width:500px; height:200px; overflow:hidden; position:relative; } ul,ol{ list-style:none; position:absolute; } ul{ width:3000px; height:200px; } li{ float:left; } ol{ right:20px; bottom:20px; } ol>li{ width:25px; height:25px; line-height:25px; text-align:center; background-color:#fff; border-radius:50%; margin-right:10px; cursor:pointer; } ol>li.current{ background-color:orange; color:white; } .control{ display:none; } .control>span{ position:absolute; top:50%; margin-top:-20px; display:inline-block; width:25px; height:40px; line-height:40px; background-color:rgba(0,0,0,0.3); color:white; font-size:20px; cursor:pointer; text-align:center; } .right{ right:0; }

varbox=document.getElementById("box"); varul=box.getElementsByTagName("ul")[0]; varol=box.getElementsByTagName("ol")[0]; varolLiArr=ol.children; varcontrol=box.getElementsByClassName("control")[0]; ul.appendChild(ul.children[0].cloneNode(true)); varindex=0; varcircleIndex=0; vartimer=setInterval(autoPlay,2000); //鼠标移入移出 box.onmouseover=function(){ clearInterval(timer); control.style.display="block"; }; box.onmouseout=function(){ timer=setInterval(autoPlay,2000); control.style.display="none"; }; //小圆点 for(vari=0;i

//自动轮播封装
functionautoPlay(){
index++;
if(index>5){
ul.style.left=0;
index=1;
}
animate_constSpeed_x(ul,-index*500);
circleIndex++;
if(circleIndex>4){
circleIndex=0;
}
for(vari=0;i0?10:-10;
ele.timer=setInterval(function(){
ele.style.left=ele.offsetLeft+step+"px";
console.log(1);
if(Math.abs(endX-ele.offsetLeft)<=Math.abs(step)){
clearInterval(ele.timer);
ele.style.left=endX+"px";
}
},10)
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

js实现简单的无缝轮播效果

热门推荐

随机推荐