原生Js 实现的简单无缝滚动轮播图的示例代码
简单无缝滚动轮播图存在很多漏洞，就是后期增加图片时会很不方便，需要改动的地方也很多，耦合性也很强，只适用于一部分程序，所以我们可以通过改动图片结构和计算折算点的方式，升级代码。
原简单的滚动轮播代码
<html><head> <meta charset='UTF-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>Document</title> <style>*{ margin: 0; padding: 0;}.scroll{ position: relative; width: 830px;/*展示宽度 展示4个图+3个边框=830*/ height: 130px; border: 10px solid rgb(15, 15, 15); margin: 100px auto; overflow: hidden;}.scroll ul{ position: absolute; width: 5000px;/*ul能存下所有li的宽*/ height: 130px; top: 0; left: 0;}.scroll ul li{ float: left; width: 200px; height: 130px; margin-right: 10px; overflow: hidden;} </style></head><body> <div class='scroll'><ul id='munit'> <li><img src='https://www.haobala.com/BOM/shuzi/3.png' alt=''></li> <li><img src='https://www.haobala.com/BOM/shuzi/4.png' alt=''></li> <li><img src='https://www.haobala.com/BOM/shuzi/5.png' alt=''></li> <li><img src='https://www.haobala.com/BOM/shuzi/6.png' alt=''></li> <li><img src='https://www.haobala.com/BOM/shuzi/7.png' alt=''></li> <li><img src='https://www.haobala.com/BOM/shuzi/8.png' alt=''></li> <li><img src='https://www.haobala.com/BOM/shuzi/9.png' alt=''></li> <li><img src='https://www.haobala.com/BOM/shuzi/3.png' alt=''></li> <li><img src='https://www.haobala.com/BOM/shuzi/4.png' alt=''></li> <li><img src='https://www.haobala.com/BOM/shuzi/5.png' alt=''></li> <li><img src='https://www.haobala.com/BOM/shuzi/6.png' alt=''></li> <li><img src='https://www.haobala.com/BOM/shuzi/7.png' alt=''></li> <li><img src='https://www.haobala.com/BOM/shuzi/8.png' alt=''></li> <li><img src='https://www.haobala.com/BOM/shuzi/9.png' alt=''></li></ul> </div> <script>//获取元素var scroll = document.getElementById('scroll');var munit = document.getElementById('munit');var li = munit.children;// 进行滚动var nowLeft = 0;//要找到ul元素运动的折返点var back = -1470;//图和边框是li的宽度，展示的有4张图，所以折返点就是1260//定时器var timer = setInterval(run,20);// 鼠标移上scroll停止scroll.onmouseover = function(){ clearInterval(timer);}// 移开轮播scroll.onmouseout = function(){ timer = setInterval(run,20);}//运动函数function run(){ nowLeft -= 2; //判断是否走到了折返点，走到了，则瞬间切换到0位置 if(nowLeft <= back){nowLeft = 0; } munit.style.left = nowLeft + 'px';} </script></body></html>
在<div id='scroll'>结构给ul新增的一个父级div，这样之后添加图片，后期通过获取ul宽度就可以了计算折算点 1、折返点计算需要通过Js自动计算 var back = -munit.offsetWidth;//元素左移，值为负数 2、自动生成另一组对应的图片结构 li munit.innerHTML = munit.innerHTML + munit.innerHTML;//这样就会增加一组li标签，后期增加图片也会随之增加修改部分代码，
css改写部分： /*给ul新增的一个父级div，这样添加图片后期获取ul宽度 就可以了 */.scroll .inner{ position: relative; width: 5000px;}.scroll ul{ position: absolute; height: 130px; top: 0; left: 0; list-style: none;body改写部分： <body> <div class='scroll'> <div class='inner'> <ul id='munit'> <li><img src='https://www.haobala.com/BOM/shuzi/3.png' alt=''></li> <li><img src='https://www.haobala.com/BOM/shuzi/4.png' alt=''></li> <li><img src='https://www.haobala.com/BOM/shuzi/5.png' alt=''></li> <li><img src='https://www.haobala.com/BOM/shuzi/6.png' alt=''></li> <li><img src='https://www.haobala.com/BOM/shuzi/7.png' alt=''></li> <li><img src='https://www.haobala.com/BOM/shuzi/8.png' alt=''></li> <li><img src='https://www.haobala.com/BOM/shuzi/9.png' alt=''></li> <li><img src='https://www.haobala.com/BOM/shuzi/10.png' alt=''></li> </ul> </div> </div>JS改写部分：<script>//获取元素var scroll = document.getElementById('scroll');var munit = document.getElementById('munit');//改写部分//1 折返点计算需要通过Js自动计算var back = -munit.offsetWidth;//元素左移，值为负数//2 自动生成另一组对应的图片结构 limunit.innerHTML = munit.innerHTML + munit.innerHTML;// 进行滚动var nowLeft = 0;//定时器var timer = setInterval(run,20);// 鼠标移上scroll停止scroll.onmouseover = function(){ clearInterval(timer);}// 移开轮播scroll.onmouseout = function(){ timer = setInterval(run,20);}//运动函数function run(){ nowLeft -= 1; //判断是否走到了折返点，走到了，则瞬间切换到0位置 if(nowLeft <= back){nowLeft = 0; } munit.style.left = nowLeft + 'px';} </script></body></html>
这样的代码耦合性低，也适合任意个数的li、任意大小的图片的加入
以上就是原生Js 实现的简单无缝滚动轮播图的示例代码的详细内容，更多关于Js 实现的简单无缝滚动轮播图的资料请关注好吧啦网其它相关文章！
相关文章：
网公网安备