正文
3、js无缝滚动轮播
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
另一个无缝滚动轮播，带暂停，由于js是异步，用C面向过程的思想开始会很怪异很怪异，因为当你定时器里面需要执行的函数时间比较长或是有一段延时时，异步的代码会完全不同，但习惯就好了。
这个代码有几个问题，后续会优化：
1、由于css定位margin的问题，并非几张轮播的图片移动的距离一致，故而你会看到两个很冗余的if代码，那个判断都固定死了
2、这种定时器嵌套理解起来比较容易，但有一个较大的问题是：当执行到setTimeout时，你会发现鼠标移入移出暂停轮播的效果失效，因为这是程序执行的是一段空的延时，才会出现这样
3、要实现带暂停的轮播，上面有这两个缺陷，用户体验会有一丢丢不perfect，当然有更好更高级的方式实现，这里就当做自己刚入门的一段回忆好了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js-text</title>
<style>
html,body,div,ul,li{margin:0;padding:0}
.div11{width:895px;height:165px;margin:300px auto 0;position:relative;border-radius:10px;
overflow:hidden}
#div1 ul{position:absolute;left:0;top:0;}
#div1 ul li{width:220px;height:165px;float:left;list-style:none;margin:0 2px;}
#div1 ul img{width:220px;height:165px;border-radius:10px;}
/*#div1 img{width:33px;height:33px;}*/
.cDirection {width:955px;height:30px;margin:0 auto;}
.cDirection img{width:30px;height:30px;}
.cDirection .right{float:right}
body{background:url("images/background2.jpg")}
</style>
<script>
window.onload=function (){
var oDiv1=document.getElementById('div1');
var oDiv2=document.getElementById('direction');
var oUl=oDiv1.getElementsByTagName('ul')[0];
var oLi=oDiv1.getElementsByTagName('li');
var oA=oDiv2.getElementsByTagName('a');
var nSpeed=2;
var time;
var flag=0;
oUl.style.width=(oLi[0].offsetWidth+4)*oLi.length+'px';
function move(){
if(oUl.offsetLeft<-oUl.offsetWidth/2){
oUl.style.left='0';
}
if(oUl.offsetLeft>0){
oUl.style.left=-oUl.offsetWidth/2+'px';
}
oUl.style.left=oUl.offsetLeft+nSpeed+'px';
// console.log(oUl.offsetLeft);
}
var lunBo=function(){
clearInterval(time); time=setInterval(function(){
move();
// if((oUl.offsetLeft)%(oLi[0].offsetWidth+nSpeed)==0&&oUl.offsetLeft!=-888)
if((oUl.offsetLeft==-670||oUl.offsetLeft==-446||oUl.offsetLeft==-222||oUl.offsetLeft==0)&&nSpeed==2)
{
clearInterval(time);
setTimeout(function(){
lunBo();
},1000);
}
if((oUl.offsetLeft==-670||oUl.offsetLeft==-446||oUl.offsetLeft==-222||oUl.offsetLeft==-894)&&nSpeed==-2)
{
clearInterval(time);
setTimeout(function(){
lunBo();
},1000);
}
},10);
};
// var newLunBo=new lunBo();
lunBo();
oDiv1.onmouseover=function (){clearInterval(time)};
oDiv1.onmouseout=function (){lunBo()};
oA[0].onmouseover=function (){nSpeed=-2};
oA[1].onmouseover=function (){nSpeed=2};
};
</script>
</head>
<body>
<div class="div11" id="div1">
<ul>
<li><a href="javascript:"><img src="data:images/picture1.png" alt="1"></a></li>
<li><a href="javascript:"><img src="data:images/picture2.png" alt="2"></a></li>
<li><a href="javascript:"><img src="data:images/picture3.png" alt="3"></a></li>
<li><a href="javascript:"><img src="data:images/picture4.png" alt="4"></a></li>
<li><a href="javascript:"><img src="data:images/picture1.png" alt="1"></a></li>
<li><a href="javascript:"><img src="data:images/picture2.png" alt="2"></a></li>
<li><a href="javascript:"><img src="data:images/picture3.png" alt="3"></a></li>
<li><a href="javascript:"><img src="data:images/picture4.png" alt="4"></a></li>
</ul></div>
<div class="cDirection" id="direction">
<a href="javascript:"><img src="data:images/left1.png" alt=""></a>
<a class="right" href="javascript:"><img src="data:images/right1.png" alt=""></a>
</div>
</body>
</html>
