javascript實(shí)現(xiàn)多張圖片左右無縫滾動效果
更新時(shí)間：2017年03月22日 11:12:43 作者：wmaqingbo
本文主要介紹了javascript實(shí)現(xiàn)多張圖片左右無縫滾動效果的實(shí)例。具有很好的參考價(jià)值。下面跟著小編一起來看下吧
結(jié)構(gòu)：box包含ul，ul包含4個(gè)li；ul絕對定位。
復(fù)制li-1、li-2到第li-4后面，為了區(qū)分于li-1、li-2，內(nèi)容改為li-5、li-6，顏色不變。此時(shí)ul包含6個(gè)li。
需要注意的是，移動的是ul這個(gè)大盒子而不是li。
原理：當(dāng)ul 絕對定位的left 值等于（li-1+li-2+li-3+li-4）的寬度時(shí)，利用JavaScript快速復(fù)原left 值為0 。
此時(shí)請注意盒子里面數(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)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！
相關(guān)文章
javascript實(shí)現(xiàn)小型區(qū)塊鏈功能
這篇文章主要介紹了javascript實(shí)現(xiàn)小型區(qū)塊鏈功能，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要介紹了詳解JS異步加載的三種方式,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-03-03
這篇文章主要為大家詳細(xì)介紹了微信小程序下拉框組件使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
本文主要總結(jié)了js數(shù)組與字符串的常用方法。具有一定的參考價(jià)值，下面跟著小編一起來看下吧2017-01-01
JavaScript中判斷某個(gè)字符串、數(shù)組等是否包含某個(gè)值的五種方法
在JavaScript中有多種方法可以用來判斷字符串、數(shù)組是否包含某個(gè)值,這篇文章主要給大家介紹了關(guān)于JavaScript中判斷某個(gè)字符串、數(shù)組等是否包含某個(gè)值的五種方法,需要的朋友可以參考下2024-03-03
uniapp使用navigateBack方法返回上級頁面并刷新的簡單示例
最近寫uniapp項(xiàng)目的時(shí)候發(fā)現(xiàn)有時(shí)候需要更新頁面數(shù)據(jù),所以下面這篇文章主要給大家介紹了關(guān)于uniapp使用navigateBack方法返回上級頁面并刷新的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-03-03
一直都是簡單去js實(shí)現(xiàn)cookie的一些操作,今天把js對cookie操作系統(tǒng)的整理了一遍,包括:js讀取cookie,js添加cookie,js刪除cookie2012-12-12
用js來格式化字符串示例模仿css...2007-04-04
最近繼續(xù)玩一些微信小程序的api來做例子,感覺自己可能創(chuàng)造力不很足,只能模仿著別人的例子來做一個(gè)自己的計(jì)算器了,下面這篇文章主要給大家介紹了關(guān)于微信小程序計(jì)算器實(shí)現(xiàn)案例的相關(guān)資料,需要的朋友可以參考下2023-06-06
這篇文章主要為大家介紹了JS組件Bootstrap Select2使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-01-01