左右无缝轮播html,JS左右无缝轮播功能完整实例

JS左右无缝轮播功能完整实例

发布时间：2020-09-14 08:34:16

来源：脚本之家

阅读：135

作者：辣姐什么鬼

本文实例讲述了JS左右无缝轮播功能。分享给大家供大家参考，具体如下：

其中对上一页下一页按钮设置visibility属性是为了解决轮播中点击上一页下一页导致的bug，应为是a标签所以用了visibility属性，如果是按钮button可以直接设置在轮播过程中按钮不可点击，当然其他解决方法都可以，以实际为准

代码如下：换换图片就可以直接用

www.jb51.net JS左右无缝轮播

* {margin:0;padding:0;}

#scrollImg{width:1000px;margin:100px auto;}

#prev{float:left;line-height:250px;}

#next{float:right;line-height:250px;}

#div1 {width:800px;height:250px;margin:0px auto;position:relative;overflow:hidden;}

#div1 ul {position:absolute;left:0;top:0;}

#div1 ul li {float:left;list-style:none;width:200px;height:250px;}

#div1 ul li img{width:100%;height:100%;}

向左

向右

• 
• 
• 
• 

window.οnlοad=function(){

var oDiv=document.getElementById("div1");

var oUl=document.getElementsByTagName("ul")[0];

var oLi=document.getElementsByTagName("li");

var index=0;

var timer;//定时器

oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;//将轮播内容复制一份

oUl.style.width=oLi[0].offsetWidth*oLi.length+"px";

//移动速度

var speed=-10;

//控制滚动的方向

var prev=document.getElementById("prev");

var next=document.getElementById("next");

//上一页

prev.οnclick=function(){

if(index==4){

index=1;

oUl.style.left="0px";

}else{

index++;

speed=10;

}

move();

};

//下一页

next.οnclick=function(){

if(index==0){

index=3;

oUl.style.left=-oUl.offsetWidth/2+"px";

}else{

index--;

speed=-10;

}

move();

};

function move(){

timer=setInterval(function () {

oUl.style.left=oUl.offsetLeft-speed+"px";

var stop=-index*oLi[0].offsetWidth+"px";

prev.style.visibility="hidden";

next.style.visibility="hidden";

if(oUl.style.left==stop){

clearInterval(timer);

prev.style.visibility="visible";

next.style.visibility="visible";

}

},20);

}

}

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript图片操作技巧大全》、《JavaScript切换特效与技巧总结》、《JavaScript运动效果与技巧汇总》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。