溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關原生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如何實現簡單無縫滾動輪播圖”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
