原生Js 實(shí)現(xiàn)的簡(jiǎn)單無(wú)縫滾動(dòng)輪播圖的示例代碼
簡(jiǎn)單無(wú)縫滾動(dòng)輪播圖存在很多漏洞，就是后期增加圖片時(shí)會(huì)很不方便，需要改動(dòng)的地方也很多，耦合性也很強(qiáng)，只適用于一部分程序，所以我們可以通過(guò)改動(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.aoyou183.cn/BOM/shuzi/3.png' alt=''></li> <li><img src='http://www.aoyou183.cn/BOM/shuzi/4.png' alt=''></li> <li><img src='http://www.aoyou183.cn/BOM/shuzi/5.png' alt=''></li> <li><img src='http://www.aoyou183.cn/BOM/shuzi/6.png' alt=''></li> <li><img src='http://www.aoyou183.cn/BOM/shuzi/7.png' alt=''></li> <li><img src='http://www.aoyou183.cn/BOM/shuzi/8.png' alt=''></li> <li><img src='http://www.aoyou183.cn/BOM/shuzi/9.png' alt=''></li> <li><img src='http://www.aoyou183.cn/BOM/shuzi/3.png' alt=''></li> <li><img src='http://www.aoyou183.cn/BOM/shuzi/4.png' alt=''></li> <li><img src='http://www.aoyou183.cn/BOM/shuzi/5.png' alt=''></li> <li><img src='http://www.aoyou183.cn/BOM/shuzi/6.png' alt=''></li> <li><img src='http://www.aoyou183.cn/BOM/shuzi/7.png' alt=''></li> <li><img src='http://www.aoyou183.cn/BOM/shuzi/8.png' alt=''></li> <li><img src='http://www.aoyou183.cn/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，這樣之后添加圖片，后期通過(guò)獲取ul寬度就可以了計(jì)算折算點(diǎn) 1、折返點(diǎn)計(jì)算需要通過(guò)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.aoyou183.cn/BOM/shuzi/3.png' alt=''></li> <li><img src='http://www.aoyou183.cn/BOM/shuzi/4.png' alt=''></li> <li><img src='http://www.aoyou183.cn/BOM/shuzi/5.png' alt=''></li> <li><img src='http://www.aoyou183.cn/BOM/shuzi/6.png' alt=''></li> <li><img src='http://www.aoyou183.cn/BOM/shuzi/7.png' alt=''></li> <li><img src='http://www.aoyou183.cn/BOM/shuzi/8.png' alt=''></li> <li><img src='http://www.aoyou183.cn/BOM/shuzi/9.png' alt=''></li> <li><img src='http://www.aoyou183.cn/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ì)算需要通過(guò)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)單無(wú)縫滾動(dòng)輪播圖的示例代碼的詳細(xì)內(nèi)容，更多關(guān)于Js 實(shí)現(xiàn)的簡(jiǎn)單無(wú)縫滾動(dòng)輪播圖的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！
相關(guān)文章：
1. 淺談SpringMVC jsp前臺(tái)獲取參數(shù)的方式 EL表達(dá)式2. asp(vbscript)中自定義函數(shù)的默認(rèn)參數(shù)實(shí)現(xiàn)代碼3. HTML5 Canvas繪制圖形從入門到精通4. 使用Spry輕松將XML數(shù)據(jù)顯示到HTML頁(yè)的方法5. 利用CSS3新特性創(chuàng)建透明邊框三角6. ASP基礎(chǔ)知識(shí)VBScript基本元素講解7. 詳解CSS偽元素的妙用單標(biāo)簽之美8. XHTML 1.0：標(biāo)記新的開端9. JSP的Cookie在登錄中的使用10. XML入門的常見問(wèn)題(四)
網(wǎng)公網(wǎng)安備