闲扯 Javascript 04 滚动条

时间：2024-01-15 18:02:08
物体运动基础
让Div移动起来
offsetLeft的作用
用定时器让物体连续移动
效果原理
让ul一直向左移动
复制li
innerHTML和+=
修改ul的width
滚动过界后，重设位置
判断过界
改变滚动方向
修改speed
修改判断条件
鼠标移入暂停
移入关闭定时器
移出重新开启定时器
 <style>

 *{ margin:0px; padding:0px;}

 #div1{ width:712px; height:108px; margin:100px auto; position:relative; background:#F00; overflow:hidden;}

 #div1 ul{ position:absolute; left:0px; top:0px; }

 #div1 ul li{ float:left; list-style:none; width:178px; height:108px;}

 </style>

 <script>

 window.onload=function ()

 {

     var oDiv=document.getElementById('div1');

     var oUl=oDiv.getElementsByTagName('ul')[0];

     var oLi=oDiv.getElementsByTagName('li');

     oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;

     oUl.style.width=oLi[0].offsetWidth*oLi.length+'px';

     var num=-2;

     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>0 也就是left 到达右边，后面跟着出现红色，此时只需把它的宽度拉到offsetWidth的中段(oUl的宽度)即可

                 }

         oUl.style.left=oUl.offsetLeft+num+'px';

         }

     timer=setInterval( move

     ,30)

     oDiv.onmouseover=function ()

     {

         clearInterval(timer);

     };

     oDiv.onmouseout=function ()

     {

         timer=setInterval(move, 30);

     };

     document.getElementsByTagName('a')[0].onclick=function ()

     {

         num=-2;

         }

         document.getElementsByTagName('a')[1].onclick=function (){ num=2;}

     };

 </script>

 </head>

 <body>

 <a href="#">向左走</a>

 <a href="#">向右走</a>

 <div id="div1">

   <ul>

   <li> <img src="data:images/1.jpg"/></li>

    <li> <img src="data:images/2.jpg"/></li>

     <li> <img src="data:images/3.jpg"/></li>

       <li> <img src="data:images/4.jpg"/></li>

   </ul>

 </div>

 </body>

相关文章