无缝滚动轮播

效果图：

实现的功能有：1.点击按钮实现换向。2.鼠标放到图片上，轮播停止移动。鼠标离开，轮播继续移动。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0; padding:0}
#div2{ width:200px; margin-left:600px;}
#div1{
    width:928px; height:232px;
    margin:100px auto;
     background:red;
      position:relative;
       overflow:hidden;
    }
#div1 ul{ position:absolute; left:0; top:0;}
#div1 ul li{ float:left; width:232px; height:232px; list-style:none;}
</style>
</head>

<body>
<div id="div1">
    <ul>
        <li><img src="img/1.jpg"></li>
        <li><img src="img/2.jpg"></li>
        <li><img src="img/3.jpg"></li>
        <li><img src="img/4.jpg"></li>
        
    </ul>
</div>
<br />
<div id="div2"><input type="button" value="向左走" />
<input type="button" value="向右走" /></div>
</body>
</html>
View Code

js代码：

<script type="text/javascript">
window.onload=function(){
        var oDiv=document.getElementById("div1");
        var oDiv2=document.getElementById("div2");
        var oUl=oDiv.getElementsByTagName("ul")[0];
        var aLi=oUl.getElementsByTagName('li');
        var speed=2;//调整轮播的速度
        oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;
        oUl.style.width=aLi[0].offsetWidth*aLi.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+speed+"px";
            }
        var timer=setInterval(move,30);
            oDiv.onmouseover=function(){//鼠标放上，延时器移除
                    clearInterval(timer);
                    
                }
            oDiv.onmouseout=function(){//鼠标移开，添加延时器
                    timer=setInterval(move,30);
                    }
            oDiv2.getElementsByTagName('input')[0].onclick=function(){
                            speed=-2;
                        }
            oDiv2.getElementsByTagName('input')[1].onclick=function(){
                            speed=2;
                        }
                        
    }
</script>
View Code

通过修改变量speed可以修改轮播的速度。offsetWidth：是获取宽度。offsetLeft:获取左边的距离。

 

posted on 2017-01-16 15:18  向前看！明天会更好！  阅读(239)  评论(0)  编辑  收藏  举报