javascript實(shí)現(xiàn)多張圖片左右無縫滾動(dòng)效果
更新時(shí)間：2017年03月22日 11:12:43 作者：wmaqingbo
本文主要介紹了javascript實(shí)現(xiàn)多張圖片左右無縫滾動(dòng)效果的實(shí)例。具有很好的參考價(jià)值。下面跟著小編一起來看下吧
結(jié)構(gòu)：box包含ul，ul包含4個(gè)li；ul絕對(duì)定位。
復(fù)制li-1、li-2到第li-4后面，為了區(qū)分于li-1、li-2，內(nèi)容改為li-5、li-6，顏色不變。此時(shí)ul包含6個(gè)li。
需要注意的是，移動(dòng)的是ul這個(gè)大盒子而不是li。
原理：當(dāng)ul 絕對(duì)定位的left 值等于（li-1+li-2+li-3+li-4）的寬度時(shí)，利用JavaScript快速復(fù)原left 值為0 。
此時(shí)請(qǐng)注意盒子里面數(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)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！
相關(guān)文章
JS實(shí)現(xiàn)鍵值對(duì)遍歷json數(shù)組功能示例
這篇文章主要介紹了JS實(shí)現(xiàn)鍵值對(duì)遍歷json數(shù)組功能,結(jié)合實(shí)例形式分析了javascript遍歷json數(shù)組相關(guān)操作技巧,需要的朋友可以參考下2018-05-05
js中如何對(duì)json數(shù)組進(jìn)行排序
這篇文章主要介紹了js中如何對(duì)json數(shù)組進(jìn)行排序的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
為數(shù)據(jù)添加append,remove功能...2006-10-10
Javascript 網(wǎng)頁水印(非圖片水印)實(shí)現(xiàn)代碼
在一些B/S結(jié)構(gòu)的應(yīng)用系統(tǒng)中，有很多頁面是需要有水印的。常見的就是公文系統(tǒng)、合同系統(tǒng)等。2010-03-03
javascript實(shí)現(xiàn)多邊形碰撞檢測
這篇文章主要介紹了javascript如何實(shí)現(xiàn)多邊形碰撞檢測，幫助大家更好的理解和使用js，感興趣的朋友可以了解下2020-10-10
js實(shí)現(xiàn)的后臺(tái)左側(cè)管理菜單代碼
這篇文章主要介紹了js實(shí)現(xiàn)的后臺(tái)左側(cè)管理菜單代碼,可實(shí)現(xiàn)美觀大氣的左側(cè)折疊菜單效果,涉及JavaScript基于鼠標(biāo)事件動(dòng)態(tài)操作頁面元素樣式變換的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-09-09
前端彈出對(duì)話框 js實(shí)現(xiàn)ajax交互
這篇文章主要為大家詳細(xì)介紹了前端彈出對(duì)話框，js實(shí)現(xiàn)ajax交互，感興趣的小伙伴們可以參考一下2016-09-09
微信小程序之 catalog 切換實(shí)現(xiàn)解析
這篇文章主要介紹了微信小程序之 catalog 切換實(shí)現(xiàn)解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09
webpack本地開發(fā)環(huán)境無法用IP訪問的解決方法
下面小編就為大家分享一篇webpack本地開發(fā)環(huán)境無法用IP訪問的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
變量對(duì)象是與執(zhí)行上下文相關(guān)的數(shù)據(jù)作用域，存儲(chǔ)了在上下文中定義的變量和函數(shù)聲明，本文主要介紹了JavaScript?變量對(duì)象，具有一定的參考價(jià)值，感興趣的可以了解一下2022-05-05