原生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 id="scroll" class="scroll">
<ul id="munit">
<li><img src="../BOM/shuzi/3.png" alt=""></li>
<li><img src="../BOM/shuzi/4.png" alt=""></li>
<li><img src="../BOM/shuzi/5.png" alt=""></li>
<li><img src="../BOM/shuzi/6.png" alt=""></li>
<li><img src="../BOM/shuzi/7.png" alt=""></li>
<li><img src="../BOM/shuzi/8.png" alt=""></li>
<li><img src="../BOM/shuzi/9.png" alt=""></li>
<li><img src="../BOM/shuzi/3.png" alt=""></li>
<li><img src="../BOM/shuzi/4.png" alt=""></li>
<li><img src="../BOM/shuzi/5.png" alt=""></li>
<li><img src="../BOM/shuzi/6.png" alt=""></li>
<li><img src="../BOM/shuzi/7.png" alt=""></li>
<li><img src="../BOM/shuzi/8.png" alt=""></li>
<li><img src="../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 id="scroll" class="scroll">
<div class="inner">
<ul id="munit">
<li><img src="../BOM/shuzi/3.png" alt=""></li>
<li><img src="../BOM/shuzi/4.png" alt=""></li>
<li><img src="../BOM/shuzi/5.png" alt=""></li>
<li><img src="../BOM/shuzi/6.png" alt=""></li>
<li><img src="../BOM/shuzi/7.png" alt=""></li>
<li><img src="../BOM/shuzi/8.png" alt=""></li>
<li><img src="../BOM/shuzi/9.png" alt=""></li>
<li><img src="../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 自動生成另一組對應的圖片結構 li
munit.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 實現的簡單無縫滾動輪播圖的資料請關註WalkonNet其它相關文章！