兼容IE7以上的无缝滚动，带箭头、停顿

最新推荐文章于 2019-11-20 10:09:38 发布

weixin_30414305

最新推荐文章于 2019-11-20 10:09:38 发布

阅读量77

点赞数

原文链接：http://www.cnblogs.com/zhouyx/p/4667809.html

版权

<!DOCTYPE HTML>
<html>

   <head>
       <meta charset="utf-8" />
       <title>无缝滚动</title>
       <link href="">
   </head>
   <style>
       * {
           padding: 0;
           margin: 0;
       }
       a{
           cursor: pointer;
       }
       #div1 {
           width: 800px;
           height: 130px;
           margin:50px auto;
           position: relative;
           background: red;
           overflow: hidden;
       }
       ul {
           position: absolute;
           left: 0;
           top: 0;
       }
       li {
           float: left;
           list-style: none;
       }
       li img {
           width: 200px;
           height: 130px;
       }
   </style>

   <script>
       //       setInterval(function() {
       //               var oDiv=document.getElementById("div1");
       //               oDiv.style.left=oDiv.offsetLeft+10+'px';
       //       },30);
       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;
           oUl.style.width = aLi[0].offsetWidth * aLi.length + 'px';
           function move() {
               if (oUl.offsetLeft < -oUl.offsetWidth / 2) {
                   oUl.style.left = '0';
               }
               //向左滚
               //       oUl.style.left=oUl.offsetLeft-2+'px';
               //向右滚
               if (oUl.offsetLeft >0) {
                   oUl.style.left =-oUl.offsetWidth /2+'px';
               }
               oUl.style.left = oUl.offsetLeft + speed + 'px';
           }
           var timer=setInterval(move, 30);
           oDiv.οnmοuseοver=function(){
               clearInterval(timer);
           };
           oDiv.οnmοuseοut=function(){
               timer=setInterval(move, 30);
           };
           document.getElementsByTagName('a')[0].οnclick=function(){
               speed=-2;
           };
           document.getElementsByTagName('a')[1].οnclick=function(){
               speed=2;
           }
       }
   </script>

   <body>
   <a>向左走</a>
   <a>向右走</a>
       <div id="div1">
           <ul>
               <li><img src="images/1.jpg" /></li>
               <li><img src="images/2.jpg" /></li>
               <li><img src="images/1.jpg" /></li>
               <li><img src="images/2.jpg" /></li>
           </ul>
       </div>
   </body>

</html>

转载于:https://www.cnblogs.com/zhouyx/p/4667809.html

weixin_30414305

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
兼容IE7以上的无缝滚动，带箭头、停顿

<!DOCTYPE HTML><html> <head> <meta charset="utf-8" /> <title>无缝滚动</title> <link href=""> </head> <style> * {...
复制链接

扫一扫