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

最新推荐文章于 2021-12-22 16:14:57 发布

weixin_30632883

最新推荐文章于 2021-12-22 16:14:57 发布

阅读量118

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/slientLove/p/5901524.html

版权

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

先简单来看一下原理：

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

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

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

<!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;
           }

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

转载于:https://www.cnblogs.com/slientLove/p/5901524.html

weixin_30632883

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于网页上图片无缝滚动的一些思路

从现在的一些常见网站上，无缝滚动的例子用得非常普遍，可以说很常见，也比较实用，下面我们就来简单看看，具体的一些想法怎么实现的：先简单来看一下原理：　　　　　　　　　　首先我们看到网页上一组图片不停滚动，一次循环之后又从第一张开始，其实简单的思路是：我们设置两组图片，当第一组图片滚动到结尾时，对应的第一组图片又瞬间拉回到起始位置。　　　　　　　　　　当图片向另外一个方向滚动时，当后面一组...
复制链接

扫一扫