原生Js 實(shí)現(xiàn)的簡單無縫滾動(dòng)輪播圖的示例代碼
簡單無縫滾動(dòng)輪播圖存在很多漏洞，就是后期增加圖片時(shí)會(huì)很不方便，需要改動(dòng)的地方也很多，耦合性也很強(qiáng)，只適用于一部分程序，所以我們可以通過改動(dòng)圖片結(jié)構(gòu)和計(jì)算折算點(diǎn)的方式，升級(jí)代碼。
原簡單的滾動(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.cgvv.com.cn/BOM/shuzi/3.png' alt=''></li> <li><img src='http://www.cgvv.com.cn/BOM/shuzi/4.png' alt=''></li> <li><img src='http://www.cgvv.com.cn/BOM/shuzi/5.png' alt=''></li> <li><img src='http://www.cgvv.com.cn/BOM/shuzi/6.png' alt=''></li> <li><img src='http://www.cgvv.com.cn/BOM/shuzi/7.png' alt=''></li> <li><img src='http://www.cgvv.com.cn/BOM/shuzi/8.png' alt=''></li> <li><img src='http://www.cgvv.com.cn/BOM/shuzi/9.png' alt=''></li> <li><img src='http://www.cgvv.com.cn/BOM/shuzi/3.png' alt=''></li> <li><img src='http://www.cgvv.com.cn/BOM/shuzi/4.png' alt=''></li> <li><img src='http://www.cgvv.com.cn/BOM/shuzi/5.png' alt=''></li> <li><img src='http://www.cgvv.com.cn/BOM/shuzi/6.png' alt=''></li> <li><img src='http://www.cgvv.com.cn/BOM/shuzi/7.png' alt=''></li> <li><img src='http://www.cgvv.com.cn/BOM/shuzi/8.png' alt=''></li> <li><img src='http://www.cgvv.com.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，這樣之后添加圖片，后期通過獲取ul寬度就可以了計(jì)算折算點(diǎn) 1、折返點(diǎn)計(jì)算需要通過Js自動(dòng)計(jì)算 var back = -munit.offsetWidth;//元素左移，值為負(fù)數(shù) 2、自動(dòng)生成另一組對應(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.cgvv.com.cn/BOM/shuzi/3.png' alt=''></li> <li><img src='http://www.cgvv.com.cn/BOM/shuzi/4.png' alt=''></li> <li><img src='http://www.cgvv.com.cn/BOM/shuzi/5.png' alt=''></li> <li><img src='http://www.cgvv.com.cn/BOM/shuzi/6.png' alt=''></li> <li><img src='http://www.cgvv.com.cn/BOM/shuzi/7.png' alt=''></li> <li><img src='http://www.cgvv.com.cn/BOM/shuzi/8.png' alt=''></li> <li><img src='http://www.cgvv.com.cn/BOM/shuzi/9.png' alt=''></li> <li><img src='http://www.cgvv.com.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ì)算需要通過Js自動(dòng)計(jì)算var back = -munit.offsetWidth;//元素左移，值為負(fù)數(shù)//2 自動(dòng)生成另一組對應(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)的簡單無縫滾動(dòng)輪播圖的示例代碼的詳細(xì)內(nèi)容，更多關(guān)于Js 實(shí)現(xiàn)的簡單無縫滾動(dòng)輪播圖的資料請關(guān)注好吧啦網(wǎng)其它相關(guān)文章！
相關(guān)文章：
1. 利用CSS3新特性創(chuàng)建透明邊框三角2. springboot基于Redis發(fā)布訂閱集群下WebSocket的解決方案3. el-table表格動(dòng)態(tài)合并相同數(shù)據(jù)單元格(可指定列+自定義合并)4. React優(yōu)雅的封裝SvgIcon組件示例5. AJAX實(shí)現(xiàn)數(shù)據(jù)的增刪改查操作詳解【java后臺(tái)】6. 使用css實(shí)現(xiàn)全兼容tooltip提示框7. JSP+Servlet實(shí)現(xiàn)文件上傳到服務(wù)器功能8. ajax post下載flask文件流以及中文文件名問題9. WML語言的基本情況10. PHP 使用 Trait 解決 PHP 單繼承問題詳解
網(wǎng)公網(wǎng)安備