原生Js 實(shí)現(xiàn)的簡(jiǎn)單無縫滾動(dòng)輪播圖的示例代碼
簡(jiǎn)單無縫滾動(dòng)輪播圖存在很多漏洞，就是后期增加圖片時(shí)會(huì)很不方便，需要改動(dòng)的地方也很多，耦合性也很強(qiáng)，只適用于一部分程序，所以我們可以通過改動(dòng)圖片結(jié)構(gòu)和計(jì)算折算點(diǎn)的方式，升級(jí)代碼。
原簡(jiǎn)單的滾動(dòng)輪播代碼
<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個(gè)圖+3個(gè)邊框=830*/ height: 130px; border: 10px solid rgb(15, 15, 15); margin: 100px auto; overflow: hidden;}.scroll ul{ position: absolute; width: 5000px;/*ul能存下所有l(wèi)i的寬*/ 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.b3g6.com/BOM/shuzi/3.png' alt=''></li> <li><img src='http://www.b3g6.com/BOM/shuzi/4.png' alt=''></li> <li><img src='http://www.b3g6.com/BOM/shuzi/5.png' alt=''></li> <li><img src='http://www.b3g6.com/BOM/shuzi/6.png' alt=''></li> <li><img src='http://www.b3g6.com/BOM/shuzi/7.png' alt=''></li> <li><img src='http://www.b3g6.com/BOM/shuzi/8.png' alt=''></li> <li><img src='http://www.b3g6.com/BOM/shuzi/9.png' alt=''></li> <li><img src='http://www.b3g6.com/BOM/shuzi/3.png' alt=''></li> <li><img src='http://www.b3g6.com/BOM/shuzi/4.png' alt=''></li> <li><img src='http://www.b3g6.com/BOM/shuzi/5.png' alt=''></li> <li><img src='http://www.b3g6.com/BOM/shuzi/6.png' alt=''></li> <li><img src='http://www.b3g6.com/BOM/shuzi/7.png' alt=''></li> <li><img src='http://www.b3g6.com/BOM/shuzi/8.png' alt=''></li> <li><img src='http://www.b3g6.com/BOM/shuzi/9.png' alt=''></li></ul> </div> <script>//獲取元素var scroll = document.getElementById('scroll');var munit = document.getElementById('munit');var li = munit.children;// 進(jìn)行滾動(dòng)var nowLeft = 0;//要找到ul元素運(yùn)動(dòng)的折返點(diǎn)var back = -1470;//圖和邊框是li的寬度，展示的有4張圖，所以折返點(diǎn)就是1260//定時(shí)器var timer = setInterval(run,20);// 鼠標(biāo)移上scroll停止scroll.onmouseover = function(){ clearInterval(timer);}// 移開輪播scroll.onmouseout = function(){ timer = setInterval(run,20);}//運(yùn)動(dòng)函數(shù)function run(){ nowLeft -= 2; //判斷是否走到了折返點(diǎn)，走到了，則瞬間切換到0位置 if(nowLeft <= back){nowLeft = 0; } munit.style.left = nowLeft + 'px';} </script></body></html>
在<div id='scroll'>結(jié)構(gòu)給ul新增的一個(gè)父級(jí)div，這樣之后添加圖片，后期通過獲取ul寬度就可以了計(jì)算折算點(diǎn) 1、折返點(diǎn)計(jì)算需要通過Js自動(dòng)計(jì)算 var back = -munit.offsetWidth;//元素左移，值為負(fù)數(shù) 2、自動(dòng)生成另一組對(duì)應(yīng)的圖片結(jié)構(gòu) li munit.innerHTML = munit.innerHTML + munit.innerHTML;//這樣就會(huì)增加一組li標(biāo)簽，后期增加圖片也會(huì)隨之增加修改部分代碼，
css改寫部分： /*給ul新增的一個(gè)父級(jí)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.b3g6.com/BOM/shuzi/3.png' alt=''></li> <li><img src='http://www.b3g6.com/BOM/shuzi/4.png' alt=''></li> <li><img src='http://www.b3g6.com/BOM/shuzi/5.png' alt=''></li> <li><img src='http://www.b3g6.com/BOM/shuzi/6.png' alt=''></li> <li><img src='http://www.b3g6.com/BOM/shuzi/7.png' alt=''></li> <li><img src='http://www.b3g6.com/BOM/shuzi/8.png' alt=''></li> <li><img src='http://www.b3g6.com/BOM/shuzi/9.png' alt=''></li> <li><img src='http://www.b3g6.com/BOM/shuzi/10.png' alt=''></li> </ul> </div> </div>JS改寫部分：<script>//獲取元素var scroll = document.getElementById('scroll');var munit = document.getElementById('munit');//改寫部分//1 折返點(diǎn)計(jì)算需要通過Js自動(dòng)計(jì)算var back = -munit.offsetWidth;//元素左移，值為負(fù)數(shù)//2 自動(dòng)生成另一組對(duì)應(yīng)的圖片結(jié)構(gòu) limunit.innerHTML = munit.innerHTML + munit.innerHTML;// 進(jìn)行滾動(dòng)var nowLeft = 0;//定時(shí)器var timer = setInterval(run,20);// 鼠標(biāo)移上scroll停止scroll.onmouseover = function(){ clearInterval(timer);}// 移開輪播scroll.onmouseout = function(){ timer = setInterval(run,20);}//運(yùn)動(dòng)函數(shù)function run(){ nowLeft -= 1; //判斷是否走到了折返點(diǎn)，走到了，則瞬間切換到0位置 if(nowLeft <= back){nowLeft = 0; } munit.style.left = nowLeft + 'px';} </script></body></html>
這樣的代碼耦合性低，也適合任意個(gè)數(shù)的li、任意大小的圖片的加入
以上就是原生Js 實(shí)現(xiàn)的簡(jiǎn)單無縫滾動(dòng)輪播圖的示例代碼的詳細(xì)內(nèi)容，更多關(guān)于Js 實(shí)現(xiàn)的簡(jiǎn)單無縫滾動(dòng)輪播圖的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！
相關(guān)文章：
1. docker容器調(diào)用yum報(bào)錯(cuò)的解決辦法2. Django中如何使用Channels功能3. idea設(shè)置自動(dòng)導(dǎo)入依賴的方法步驟4. XML在語音合成中的應(yīng)用5. IntelliJ IDEA導(dǎo)出項(xiàng)目的方法6. 使用 kind 和 Docker 啟動(dòng)本地的 Kubernetes環(huán)境7. IDEA下因Lombok插件產(chǎn)生的Library source does not match the bytecode報(bào)錯(cuò)問題及解決方法(親測(cè)可用)8. intellij idea寫Python教程9. 關(guān)于html嵌入xml數(shù)據(jù)島如何穿過樹形結(jié)構(gòu)關(guān)系的問題10. python的json包位置及用法總結(jié)
網(wǎng)公網(wǎng)安備