码迷,mamicode.com
首页 > Web开发 > 详细

关于网页上图片无缝滚动的一些思路

时间:2016-09-23 21:33:23      阅读:156      评论:0      收藏:0      [点我收藏+]

标签:

从现在的一些常见网站上,无缝滚动的例子用得非常普遍,可以说很常见,也比较实用,下面我们就来简单看看,具体的一些想法怎么实现的:

先简单来看一下原理:

          首先我们看到网页上一组图片不停滚动,一次循环之后又从第一张开始,其实简单的思路是:我们设置两组图片,当第一组图片滚动到结尾时,对应的第一组图片又瞬间拉回到起始位置。

          当图片向另外一个方向滚动时,当后面一组图片滚动到结尾时:也是瞬间拉回到开头。

           下面我们简单来看一下代码:

           

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        *{ margin: 0;padding: 0; }                 //页面的简单布局
        #div1{ width: 600px;height: 120px;border: 1px solid #ccc; margin: 10px auto;position: relative;overflow:hidden;}
        #div1 ul{ list-style-type: none;height:120px;position: absolute;left: 0;top: 0; }
        #div1 ul li{float: left;width: 100px;height: 100px;padding: 10px;}          
    </style>
    <script type="text/javascript">
        window.onload = function(){
            var oUl = document.getElementById("ul1");
            var oLi = oUl.getElementsByTagName(‘li‘);
            var timer = null;                      //声明一个接受定时器返回值的变量,初始值为空
            var iSpeed = -2;
            oUl.style.width = (oLi.length)*oLi[0].offsetWidth+‘px‘;  //动态的添加UL的长度,这样可以适应布局
            timer=setInterval(function(){
                if(oUl.offsetLeft<-oUl.offsetWidth/2){        //首先向左滚动,如果滚到一半,此时left应该是-oUl.offsetWidth/2,我们就将他拉回来到起始的位置
                    oUl.style.left = 0+‘px‘;
                }
                if(oUl.offsetLeft>0){
                    oUl.style.left = -oUl.offsetWidth/2+‘px‘;            //同理向右跑到一半,原理一样,就拉回来
                }
                oUl.style.left = oUl.offsetLeft+iSpeed+‘px‘;
            },30);
            oUl.onmouseover = function(){           //鼠标移入到图片上时,就停止运动
                clearInterval(timer);
            }
            oUl.onmouseout = function(){
                timer=setInterval(function(){
                if(oUl.offsetLeft<-oUl.offsetWidth/2){      //鼠标移出时,又开始运动
                    oUl.style.left = 0+‘px‘;
                }
                if(oUl.offsetLeft>0){
                    oUl.style.left = -oUl.offsetWidth/2+‘px‘;            //向右跑到一半,就拉回来
                }
                oUl.style.left = oUl.offsetLeft+iSpeed+‘px‘;
            },30);
            }
        }
    </script>
</head>
<body>
    <div id="div1">
        <ul id="ul1">                    //这里我们设置了两组图片
            <li><img src="img/宁静的海1.jpg"></li>
            <li><img src="img/就这样1.jpg"></li>
            <li><img src="img/宁静1.jpg"></li>
            <li><img src="img/bus1.jpg"></li>
            <li><img src="img/cry1.jpg"></li>

            <li><img src="img/宁静的海1.jpg"></li>
            <li><img src="img/就这样1.jpg"></li>
            <li><img src="img/宁静1.jpg"></li>
            <li><img src="img/bus1.jpg"></li>
            <li><img src="img/cry1.jpg"></li>
            
        </ul>
    </div>
</body>
</html>

 

当然我么可以简化代码:

function startMove(){

  timer=setInterval(function(){
                if(oUl.offsetLeft<-oUl.offsetWidth/2){      //鼠标移出时,又开始运动
                    oUl.style.left = 0+‘px‘;
                }
                if(oUl.offsetLeft>0){
                    oUl.style.left = -oUl.offsetWidth/2+‘px‘;            //向右跑到一半,就拉回来
                }
                oUl.style.left = oUl.offsetLeft+iSpeed+‘px‘;
            },30);

}

将这段重复代码写成一个函数,后面直接调用即可。  而且,我么可以添加一个向左或者向右的按钮:

    oBtn1.onclick = function(){
                iSpeed = -2;
            }
            oBtn2.onclick = function(){
                iSpeed = 2;
            }

通过设置速度的正负值,来改变方向。

 

关于网页上图片无缝滚动的一些思路

标签:

原文地址:http://www.cnblogs.com/slientLove/p/5901524.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!