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{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="images/picture1.png" alt="1"></a></li>
        <li><a href="javascript:"><img src="images/picture2.png" alt="2"></a></li>
        <li><a href="javascript:"><img src="images/picture3.png" alt="3"></a></li>
        <li><a href="javascript:"><img src="images/picture4.png" alt="4"></a></li>
        <li><a href="javascript:"><img src="images/picture1.png" alt="1"></a></li>
        <li><a href="javascript:"><img src="images/picture2.png" alt="2"></a></li>
        <li><a href="javascript:"><img src="images/picture3.png" alt="3"></a></li>
        <li><a href="javascript:"><img src="images/picture4.png" alt="4"></a></li>
    </ul>

</div>
<div class="cDirection" id="direction">
    <a href="javascript:"><img src="images/left1.png" alt=""></a>
    <a class="right" href="javascript:"><img src="images/right1.png" alt=""></a>
</div>
</body>
</html>