【JS学习】无缝滚动

时间：2017-01-30 12:30:23 阅读：266 评论：0 收藏：0 [点我收藏+]

标签：asc offset 停止 dtd seo org hid 时间 content

一、无缝滚动——基础

效果演示

物体运动基础

　　让Div移动起来

　　offsetLeft的作用，可以想到有offsetLeft就会有offsetRight，还会有offsetWight/offsetHeight

　　用定时器让物体连续移动

二、无缝滚动

（1）效果原理

　　让ul一直向左移动

（2）赋值li

　　innerHTML和+=

　　修改ul的width

（3）滚动过界后，重设位置

　　判断过界

向左滚动

向右滚动

（4）无缝滚动的扩展，鼠标移入滚动的图片后能够暂停——移入停止定时器和移出开启定时器

<!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>
div,ul,li,body{
   margin:0;
   padding:0;
   }

#div1{
   /*div的宽必须容纳4张图的位置,178乘4*/
   width:712px;
   height:108px;
   margin:100px auto;
   position:relative;
   background:red;
   overflow:hidden;
   /*把超过div1容器宽度的ul部分隐藏掉，让大家一直只看到4个*/
   }
/*给ul设置绝对定位，是因为如果图片太多，每次都要设置left太麻烦，所以可以直接移动ul*/
#div1 ul{
   position:absolute;
   left:0;
   top:0;
   }

#div1 ul li{
   float:left;
   width:178px;
   height:108px;
   list-style:none;
   }
</style>
<script>
window.onload=function ()
{
   var oDiv=document.getElementById(‘div1‘);
   var oUl=oDiv.getElementsByTagName(‘ul‘)[0];
   var aLi=oUl.getElementsByTagName(‘li‘);

   oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;//8个li一起滚动
   oUl.style.width=aLi[0].offsetWidth*aLi.length+‘px‘;//整个ul的宽度，等于1个li的宽度乘li的数量

   function move ()
   {
       //当ul的left刚好大于0的时候，立刻把整体UL向左拉回一半,即ul整体宽度的一半。
       if(oUl.offsetLeft>0)
       {
           oUl.style.left=-oUl.offsetWidth/2+‘px‘;
           }
       oUl.style.left=oUl.offsetLeft+2+‘px‘;
   };

   var timer=setInterval(move, 30);

   /*当鼠标移入图片时，图片停止滚动，可以给整个div添加事件*/
   oDiv.onmouseover=function()
   {
       /*当鼠标移入时，把定时器关掉*/
       clearInterval(timer);
       };
   /*当鼠标移出的时候，希望图片可以继续移动*/
   oDiv.onmouseout=function()
   {
       timer=setInterval(move, 30);
       /*必须把定时器启动的动作放在变量timer里面，当鼠标移入时，停止变量timer就代表停止了定时器；当鼠标移出时，启动变量timer，就代表重启了定时器。
       如果直接写setInterval(move, 30);而不是赋值给timer,那么在下一次移入鼠标时，图片不会停止，移出出鼠标后图片还会加速移动。
       因为此时有一个没被timer赋值的定时器一直在跑，即使鼠标移入停止的只是被timer赋值的定时器，图片不会停止移动，因为停止定时器的动作影响不了没有被timer赋值的定时器。
       反而会使鼠标移开之后，未被timer赋值的定时器在已经启动的同时又启动了一次，导致图片移动速度加倍*/
       };

   };
</script>

</head>

<body>
<div id="div1">
   <ul>
       <li><img src="./img2/1.jpg" /></li>
        <li><img src="./img2/2.jpg" /></li>
        <li><img src="./img2/3.jpg" /></li>
        <li><img src="./img2/4.jpg" /></li>
    </ul>
</div>
</body>
</html>

(5)2个小按钮改变无缝滚动的方向——修改speed

<!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>
div,ul,li,body{
   margin:0;
   padding:0;
   }

#div1{
   /*div的宽必须容纳4张图的位置,178乘4*/
   width:712px;
   height:108px;
   margin:100px auto;
   position:relative;
   background:red;
   overflow:hidden;
   /*把超过div1容器宽度的ul部分隐藏掉，让大家一直只看到4个*/
   }
/*给ul设置绝对定位，是因为如果图片太多，每次都要设置left太麻烦，所以可以直接移动ul*/
#div1 ul{
   position:absolute;
   left:0;
   top:0;
   }

#div1 ul li{
   float:left;
   width:178px;
   height:108px;
   list-style:none;
   }
</style>
<script>
window.onload=function ()
{
   var oDiv=document.getElementById(‘div1‘);
   var oUl=oDiv.getElementsByTagName(‘ul‘)[0];
   var aLi=oUl.getElementsByTagName(‘li‘);
   var speed=-2;

   oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;//8个li一起滚动
   oUl.style.width=aLi[0].offsetWidth*aLi.length+‘px‘;//整个ul的宽度，等于1个li的宽度乘li的数量

   function move ()
   {
       if(oUl.offsetLeft<-oUl.offsetWidth/2)
       {
           oUl.style.left=‘0‘;
           }

       //当ul的left刚好大于0的时候，立刻把整体UL向左拉回一半,即ul整体宽度的一半。
       if(oUl.offsetLeft>0)
       {
           oUl.style.left=-oUl.offsetWidth/2+‘px‘;
           }
       oUl.style.left=oUl.offsetLeft+speed+‘px‘;
   };

   var timer=setInterval(move, 30);

   /*当鼠标移入图片时，图片停止滚动，可以给整个div添加事件*/
   oDiv.onmouseover=function()
   {
       /*当鼠标移入时，把定时器关掉*/
       clearInterval(timer);
       };
   /*当鼠标移出的时候，希望图片可以继续移动*/
   oDiv.onmouseout=function()
   {
       timer=setInterval(move, 30);
       };

   document.getElementsByTagName(‘a‘)[0].onclick=function()
   {
       speed=-2;//变量speed为-2就是向左滚动
       };
   document.getElementsByTagName(‘a‘)[1].onclick=function()
   {
       speed=2;//变量speed为2就是向右滚动
       };
   };
</script>

</head>

<body>
<a href="javascripe:;">向左走</a>
<a href="javascripe:;">向右走</a>
<div id="div1">
   <ul>
       <li><img src="./img2/1.jpg" /></li>
        <li><img src="./img2/2.jpg" /></li>
        <li><img src="./img2/3.jpg" /></li>
        <li><img src="./img2/4.jpg" /></li>
    </ul>
</div>
</body>
</html>

【JS学习】无缝滚动

标签：asc offset 停止 dtd seo org hid 时间 content

原文地址：http://www.cnblogs.com/zhy2017/p/6357648.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行