javascript實現(xiàn)多張圖片左右無縫滾動效果
更新時間：2017年03月22日 11:12:43 作者：wmaqingbo
本文主要介紹了javascript實現(xiàn)多張圖片左右無縫滾動效果的實例。具有很好的參考價值。下面跟著小編一起來看下吧
結(jié)構(gòu)：box包含ul，ul包含4個li；ul絕對定位。
復制li-1、li-2到第li-4后面，為了區(qū)分于li-1、li-2，內(nèi)容改為li-5、li-6，顏色不變。此時ul包含6個li。
需要注意的是，移動的是ul這個大盒子而不是li。
原理：當ul 絕對定位的left 值等于（li-1+li-2+li-3+li-4）的寬度時，利用JavaScript快速復原left 值為0 。
此時請注意盒子里面數(shù)字和顏色的變化！
效果圖：
示例代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style media="screen">
*{
padding: 0;
margin: 0;
}
ul,li {
list-style: none;
}
img {
vertical-align: top;
}
#box{
width: 400px;
height: 100px;
margin: 100px auto;
background-color: pink;
position: relative;
overflow: hidden;
}
#box ul {
width: 2000px;
position: absolute;
left: 0;
top: 0;
}
#box li {
float: left;
}
.aa {
width: 200px;
height: 100px;
}
.li-1{
background-color: #f6e659;
}
.li-2{
background-color: #57fa4f;
}
.li-3{
background-color: #3a8ef1;
}
.li-4{
background-color: #c057f1;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li class="li-1 aa">li-1</li>
<li class="li-2 aa">li-2</li>
<li class="li-3 aa">li-3</li>
<li class="li-4 aa">li-4</li>
<li class="li-1 aa">li-5</li>
<li class="li-2 aa">li-6</li>
</ul>
</div>
</body>
</html>
<script type="text/javascript">
var box = document.getElementById("box");
var ul = box.children[0];
var num = 0;
timer = setInterval(fn,10);
function fn() {
num--;
num <= -800 ? num = 0 : num;
ul.style.left = num + "px";
}
</script>
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
相關(guān)文章
JS實現(xiàn)鍵值對遍歷json數(shù)組功能示例
這篇文章主要介紹了JS實現(xiàn)鍵值對遍歷json數(shù)組功能,結(jié)合實例形式分析了javascript遍歷json數(shù)組相關(guān)操作技巧,需要的朋友可以參考下2018-05-05
這篇文章主要介紹了js中如何對json數(shù)組進行排序的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
為數(shù)據(jù)添加append,remove功能...2006-10-10
Javascript 網(wǎng)頁水印(非圖片水印)實現(xiàn)代碼
在一些B/S結(jié)構(gòu)的應用系統(tǒng)中，有很多頁面是需要有水印的。常見的就是公文系統(tǒng)、合同系統(tǒng)等。2010-03-03
這篇文章主要介紹了javascript如何實現(xiàn)多邊形碰撞檢測，幫助大家更好的理解和使用js，感興趣的朋友可以了解下2020-10-10
這篇文章主要介紹了js實現(xiàn)的后臺左側(cè)管理菜單代碼,可實現(xiàn)美觀大氣的左側(cè)折疊菜單效果,涉及JavaScript基于鼠標事件動態(tài)操作頁面元素樣式變換的技巧,非常具有實用價值,需要的朋友可以參考下2015-09-09
這篇文章主要為大家詳細介紹了前端彈出對話框，js實現(xiàn)ajax交互，感興趣的小伙伴們可以參考一下2016-09-09
這篇文章主要介紹了微信小程序之 catalog 切換實現(xiàn)解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-09-09
webpack本地開發(fā)環(huán)境無法用IP訪問的解決方法
下面小編就為大家分享一篇webpack本地開發(fā)環(huán)境無法用IP訪問的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
變量對象是與執(zhí)行上下文相關(guān)的數(shù)據(jù)作用域，存儲了在上下文中定義的變量和函數(shù)聲明，本文主要介紹了JavaScript?變量對象，具有一定的參考價值，感興趣的可以了解一下2022-05-05