我要评论本文实例为大家分享了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)
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论