经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » JavaScript » 查看文章
原生Js 实现的简单无缝滚动轮播图的示例代码
来源:jb51  时间:2021/5/10 19:20:24  对本文有异议

   简单无缝滚动轮播图存在很多漏洞,就是后期增加图片时会很不方便,需要改动的地方也很多,耦合性也很强,只适用于一部分程序,所以我们可以通过改动图片结构和计算折算点的方式,升级代码。

      原简单的滚动轮播代码

  1. <html>
  2. <head>
  3. <meta charset="UTF-8">
  4. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. <style>
  8. *{
  9. margin: 0;
  10. padding: 0;
  11. }
  12. .scroll{
  13. position: relative;
  14. width: 830px;/*展示宽度 展示4个图+3个边框=830*/
  15. height: 130px;
  16. border: 10px solid rgb(15, 15, 15);
  17. margin: 100px auto;
  18. overflow: hidden;
  19. }
  20. .scroll ul{
  21. position: absolute;
  22. width: 5000px;/*ul能存下所有li的宽*/
  23. height: 130px;
  24. top: 0;
  25. left: 0;
  26. }
  27. .scroll ul li{
  28. float: left;
  29. width: 200px;
  30. height: 130px;
  31. margin-right: 10px;
  32. overflow: hidden;
  33. }
  34.  
  35. </style>
  36. </head>
  37. <body>
  38. <div id="scroll" class="scroll">
  39. <ul id="munit">
  40. <li><img src="../BOM/shuzi/3.png" alt=""></li>
  41. <li><img src="../BOM/shuzi/4.png" alt=""></li>
  42. <li><img src="../BOM/shuzi/5.png" alt=""></li>
  43. <li><img src="../BOM/shuzi/6.png" alt=""></li>
  44. <li><img src="../BOM/shuzi/7.png" alt=""></li>
  45. <li><img src="../BOM/shuzi/8.png" alt=""></li>
  46. <li><img src="../BOM/shuzi/9.png" alt=""></li>
  47.  
  48. <li><img src="../BOM/shuzi/3.png" alt=""></li>
  49. <li><img src="../BOM/shuzi/4.png" alt=""></li>
  50. <li><img src="../BOM/shuzi/5.png" alt=""></li>
  51. <li><img src="../BOM/shuzi/6.png" alt=""></li>
  52. <li><img src="../BOM/shuzi/7.png" alt=""></li>
  53. <li><img src="../BOM/shuzi/8.png" alt=""></li>
  54. <li><img src="../BOM/shuzi/9.png" alt=""></li>
  55. </ul>
  56. </div>
  57.  
  58. <script>
  59. //获取元素
  60. var scroll = document.getElementById("scroll");
  61. var munit = document.getElementById("munit");
  62. var li = munit.children;
  63. // 进行滚动
  64. var nowLeft = 0;
  65. //要找到ul元素运动的折返点
  66. var back = -1470;//图和边框是li的宽度,展示的有4张图,所以折返点就是1260
  67. //定时器
  68. var timer = setInterval(run,20);
  69.  
  70. // 鼠标移上scroll停止
  71. scroll.onmouseover = function(){
  72. clearInterval(timer);
  73. }
  74. // 移开轮播
  75. scroll.onmouseout = function(){
  76. timer = setInterval(run,20);
  77. }
  78.  
  79. //运动函数
  80. function run(){
  81. nowLeft -= 2;
  82. //判断是否走到了折返点,走到了,则瞬间切换到0位置
  83. if(nowLeft <= back){
  84. nowLeft = 0;
  85. }
  86. munit.style.left = nowLeft + "px";
  87. }
  88.  
  89. </script>
  90. </body>
  91. </html>

   在<div id="scroll">结构给ul新增的一个父级div,这样之后添加图片,后期通过获取ul宽度就可以了计算折算点
   1、折返点计算需要通过Js自动计算
   var back = -munit.offsetWidth;//元素左移,值为负数
   2、自动生成另一组对应的图片结构 li
   munit.innerHTML = munit.innerHTML + munit.innerHTML;//这样就会增加一组li标签,后期增加图片也会随之增加
修改部分代码,

  1. css改写部分:
  2. /*给ul新增的一个父级div,这样添加图片后期获取ul宽度 就可以了 */
  3. .scroll .inner{
  4. position: relative;
  5. width: 5000px;
  6. }
  7. .scroll ul{
  8. position: absolute;
  9. height: 130px;
  10. top: 0;
  11. left: 0;
  12. list-style: none;
  13.  
  14.  
  15. body改写部分:
  16. <body>
  17. <div id="scroll" class="scroll">
  18. <div class="inner">
  19. <ul id="munit">
  20. <li><img src="../BOM/shuzi/3.png" alt=""></li>
  21. <li><img src="../BOM/shuzi/4.png" alt=""></li>
  22. <li><img src="../BOM/shuzi/5.png" alt=""></li>
  23. <li><img src="../BOM/shuzi/6.png" alt=""></li>
  24. <li><img src="../BOM/shuzi/7.png" alt=""></li>
  25. <li><img src="../BOM/shuzi/8.png" alt=""></li>
  26. <li><img src="../BOM/shuzi/9.png" alt=""></li>
  27. <li><img src="../BOM/shuzi/10.png" alt=""></li>
  28. </ul>
  29. </div>
  30. </div>
  31.  
  32. JS改写部分:
  33. <script>
  34. //获取元素
  35. var scroll = document.getElementById("scroll");
  36. var munit = document.getElementById("munit");
  37.  
  38. //改写部分
  39. //1 折返点计算需要通过Js自动计算
  40. var back = -munit.offsetWidth;//元素左移,值为负数
  41. //2 自动生成另一组对应的图片结构 li
  42. munit.innerHTML = munit.innerHTML + munit.innerHTML;
  43. // 进行滚动
  44.  
  45.  
  46. var nowLeft = 0;
  47. //定时器
  48. var timer = setInterval(run,20);
  49.  
  50. // 鼠标移上scroll停止
  51. scroll.onmouseover = function(){
  52. clearInterval(timer);
  53. }
  54. // 移开轮播
  55. scroll.onmouseout = function(){
  56. timer = setInterval(run,20);
  57. }
  58.  
  59. //运动函数
  60. function run(){
  61. nowLeft -= 1;
  62. //判断是否走到了折返点,走到了,则瞬间切换到0位置
  63. if(nowLeft <= back){
  64. nowLeft = 0;
  65. }
  66. munit.style.left = nowLeft + "px";
  67. }
  68.  
  69. </script>
  70. </body>
  71. </html>

这样的代码耦合性低,也适合任意个数的li、任意大小的图片的加入

以上就是原生Js 实现的简单无缝滚动轮播图的示例代码的详细内容,更多关于Js 实现的简单无缝滚动轮播图的资料请关注w3xue其它相关文章!

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号