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

本文实例为大家分享了js实现简单无缝轮播效果的具体代码，供大家参考，具体内容如下

*{
 margin: 0;
 padding: 0;
}
#box{
 width: 500px;
 height: 200px;
 padding: 5px;
 margin: 50px auto;
 border: 1px solid #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;
}

<div id="box">
 <div class="inner">
 <ul>
  <li><img src="image/1.jpg" alt=""></li>
  <li><img src="image/2.jpg" alt=""></li>
  <li><img src="image/3.jpg" alt=""></li>
  <li><img src="image/4.jpg" alt=""></li>
  <li><img src="image/5.jpg" alt=""></li>
 </ul>
 <ol>
  <li class="current">1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
 </ol>
 <div class="control">
  <span class="left"><</span>
  <span class="right">></span>
 </div>
 </div>
</div>

var box=document.getelementbyid("box");
var ul=box.getelementsbytagname("ul")[0];
var ol=box.getelementsbytagname("ol")[0];
var olliarr=ol.children;
var control=box.getelementsbyclassname("control")[0];

ul.appendchild(ul.children[0].clonenode(true));
var index=0;
var circleindex=0;

var timer=setinterval(autoplay,2000);
//鼠标移入移出
box.onmouseover=function () {
 clearinterval(timer);
 control.style.display="block";
};
box.onmouseout=function () {
 timer=setinterval(autoplay,2000);
 control.style.display="none";
};
//小圆点
for (var i=0;i<olliarr.length;i++) {
 olliarr[i].index=i;
 olliarr[i].onclick=function () {
 if(index===5){
  ul.style.left=0;
  index=0;
 }
 for (var i=0;i<olliarr.length;i++){
  olliarr[i].removeattribute("class");
 }
 this.setattribute("class","current");
 animate_constspeed_x(ul,-this.index*500);
 index=this.index;
 circleindex=this.index;
 }
}
//左右点击
control.children[1].onclick=function () {
 autoplay();
};
control.children[0].onclick=function () {
 index--;
 if (index<0){
 ul.style.left=-2500+"px";
 index=4;
 }
 animate_constspeed_x(ul,-index*500);
 circleindex--;
 if (circleindex<0){
 circleindex=4;
 }
 for (var i=0;i<olliarr.length;i++) {
 olliarr[i].removeattribute("class");
 }
 olliarr[circleindex].setattribute("class","current");
};

//自动轮播封装
function autoplay() {
 index++;
 if (index>5){
 ul.style.left=0;
 index=1;
 }
 animate_constspeed_x(ul,-index*500);
 circleindex++;
 if (circleindex>4){
 circleindex=0;
 }
 for (var i=0;i<olliarr.length;i++) {
 olliarr[i].removeattribute("class");
 }
 olliarr[circleindex].setattribute("class","current");
}
//匀速封装
function animate_constspeed_x(ele,endx) {
 clearinterval(ele.timer);
 var step=(endx-ele.offsetleft)>0?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)
}

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