搜索

当前位置:首页 > 软件素材 > 插件素材 > 正文

两组li向左滚动代码

发布时间:2018-06-27 23:39:15作者:魏义齐阅读:()

本文为博主原创文章,未经博主允许不得转载。

最近给客户写页面遇到这样一个问题,同一个页面有两个li向左滚动的模块,第一个是在网上找的代码,第二个我想着复制第一个但是没效果,改类名和js都没用,只能另找一个了,这也是我为什么整理两组的原因。

说到li滚动,很多人首先会想到marquee,因为操作简单,但是marquee经过我的测试在火狐浏览器和IE浏览器里面有抖动的现象,而且抖动的频率很高。

下面我把我整理的两组代码分享出来(注:我整理的代码都是重写的,很精简,大家不用担心有冗余的代码在里面)。

第一组:

预览链接:https://www.weiyiqi.net/lookdoc/li_left1/

因为有js库,我就不贴代码了,直接提供下载链接:https://pan.baidu.com/s/1KK2CIidsUfyNe4RZAC845g

第二组:

html代码:
  1. <!doctype html> 
  2. <html> 
  3. <head> 
  4.     <meta charset="utf-8"> 
  5.     <title>li向左滚动2-软件素材-魏义齐个人博客</title> 
  6.     <link type="text/css" rel="stylesheet" href="css/index.css"> 
  7. </head> 
  8.  
  9. <body> 
  10. <div class="case"> 
  11.     <div id="scroll"><a href="javascript:;" class="btn_left"></a> <a href="javascript:;" class="btn_right"></a> 
  12.         <div class="content"> 
  13.             <ul> 
  14.                 <li>one</li> 
  15.                 <li>two</li> 
  16.                 <li>three</li> 
  17.                 <li>four</li> 
  18.                 <li>five</li> 
  19.                 <li>six</li> 
  20.                 <li>seven</li> 
  21.             </ul> 
  22.         </div> 
  23.     </div> 
  24. </div> 
  25. <script type="text/javascript"> 
  26.     window.onload = function () { 
  27.         var oDiv = document.getElementById('scroll'); 
  28.         var oUl = oDiv.getElementsByTagName('ul')[0]; 
  29.         var aLi = oDiv.getElementsByTagName('li'); 
  30.         var aBtn = oDiv.getElementsByTagName('a'); 
  31.         var speed = -1; 
  32.         var timer = null
  33.         oUl.innerHTML += oUl.innerHTML; 
  34.         oUl.style.width = aLi[0].offsetWidth * aLi.length + 'px'; 
  35.         timer = setInterval(function () { 
  36.             oUloUl.style.left = oUl.offsetLeft + speed + 'px'; 
  37.             if (oUl.offsetLeft < -oUl.offsetWidth / 2) { 
  38.                 oUl.style.left = '0'
  39.             } else if (oUl.offsetLeft > 0) { 
  40.                 oUl.style.left = -oUl.offsetWidth / 2 + 'px'; 
  41.             } 
  42.         }, 30); 
  43.         aBtn[0].onclick = function () { 
  44.             speed = -1; 
  45.         }; 
  46.         aBtn[1].onclick = function () { 
  47.             speed = 1
  48.         }; 
  49.         oUl.onmouseover = function () { 
  50.             clearInterval(timer); 
  51.         }; 
  52.         oUl.onmouseout = function () { 
  53.             timer = setInterval(function () { 
  54.                 oUloUl.style.left = oUl.offsetLeft + speed + 'px'; 
  55.                 if (oUl.offsetLeft < -oUl.offsetWidth / 2) { 
  56.                     oUl.style.left = '0'
  57.                 } else if (oUl.offsetLeft > 0) { 
  58.                     oUl.style.left = -oUl.offsetWidth / 2 + 'px'; 
  59.                 } 
  60.             }, 30); 
  61.         }; 
  62.     }; 
  63. </script> 
  64. </body> 
  65. </html>
css代码:
  1. @charset "utf-8"
  2. /* CSS Document */ 
  3. * { 
  4.     margin0
  5.     padding0
  6.     list-style-typenone
  7.     font-family"微软雅黑"
  8. .case { 
  9.     width1140px
  10.     overflowhidden
  11.     marginauto
  12. #scroll { 
  13.     width1140px
  14.     height300px
  15.     positionrelative
  16.     overflowhidden
  17. #scroll .content { 
  18.     width1140px
  19.     height300px
  20.     positionrelative
  21.     overflowhidden
  22.     margin0 auto
  23. #scroll ul { 
  24.     width2280px
  25.     positionabsolute
  26. #scroll li { 
  27.     floatleft
  28.     width330px
  29.     text-aligncenter
  30.     height300px
  31.     line-height300px
  32.     margin-right50px
  33.     font-size20px
  34.     color#666
  35.     font-styleitalic
  36.     background-color#cfcfcf
以上就是我整理的两组li向左滚动的代码,希望对大家提高工作效率有所帮助。

魏义齐全栈技术交流:魏义齐web前端技术交流

打赏本站

原创不易,您的打赏就是博主更新的动力!

上一篇:网站在线客服漂浮窗代码 下一篇:一个绝对值得收藏的日期选择插件

相关阅读