原生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='http://www.hdgsjgj.cn/BOM/shuzi/3.png' alt=''></li> <li><img src='http://www.hdgsjgj.cn/BOM/shuzi/4.png' alt=''></li> <li><img src='http://www.hdgsjgj.cn/BOM/shuzi/5.png' alt=''></li> <li><img src='http://www.hdgsjgj.cn/BOM/shuzi/6.png' alt=''></li> <li><img src='http://www.hdgsjgj.cn/BOM/shuzi/7.png' alt=''></li> <li><img src='http://www.hdgsjgj.cn/BOM/shuzi/8.png' alt=''></li> <li><img src='http://www.hdgsjgj.cn/BOM/shuzi/9.png' alt=''></li> <li><img src='http://www.hdgsjgj.cn/BOM/shuzi/3.png' alt=''></li> <li><img src='http://www.hdgsjgj.cn/BOM/shuzi/4.png' alt=''></li> <li><img src='http://www.hdgsjgj.cn/BOM/shuzi/5.png' alt=''></li> <li><img src='http://www.hdgsjgj.cn/BOM/shuzi/6.png' alt=''></li> <li><img src='http://www.hdgsjgj.cn/BOM/shuzi/7.png' alt=''></li> <li><img src='http://www.hdgsjgj.cn/BOM/shuzi/8.png' alt=''></li> <li><img src='http://www.hdgsjgj.cn/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='http://www.hdgsjgj.cn/BOM/shuzi/3.png' alt=''></li> <li><img src='http://www.hdgsjgj.cn/BOM/shuzi/4.png' alt=''></li> <li><img src='http://www.hdgsjgj.cn/BOM/shuzi/5.png' alt=''></li> <li><img src='http://www.hdgsjgj.cn/BOM/shuzi/6.png' alt=''></li> <li><img src='http://www.hdgsjgj.cn/BOM/shuzi/7.png' alt=''></li> <li><img src='http://www.hdgsjgj.cn/BOM/shuzi/8.png' alt=''></li> <li><img src='http://www.hdgsjgj.cn/BOM/shuzi/9.png' alt=''></li> <li><img src='http://www.hdgsjgj.cn/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 實現的簡單無縫滾動輪播圖的資料請關注好吧啦網其它相關文章！
相關文章：
1. vue實現web在線聊天功能2. JavaScript實現頁面動態驗證碼的實現示例3. JavaEE SpringMyBatis是什么? 它和Hibernate的區別及如何配置MyBatis4. Springboot 全局日期格式化處理的實現5. SpringBoot+TestNG單元測試的實現6. 完美解決vue 中多個echarts圖表自適應的問題7. 解決Android Studio 格式化 Format代碼快捷鍵問題8. 在Chrome DevTools中調試JavaScript的實現9. Python使用urlretrieve實現直接遠程下載圖片的示例代碼10. Java使用Tesseract-Ocr識別數字
網公網安備