js實現(xiàn)無縫滾動圖
更新時間：2017年02月22日 10:02:14 作者：漫步未來
本文主要分享了js實現(xiàn)無縫滾動圖的示例代碼，具有很好的參考價值，下面跟著小編一起來看下吧
效果如下：
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type = "text/css">
ul, li { padding: 0; margin: 0; }
li { list-style: none; }
.box {
width: 800px;
height: 450px;
margin: 50px auto;
overflow: hidden;
position: relative;
}
.box span {
width: 40px;
height: 60px;
display: block;
position: absolute;
top: 225px;
margin-top: -20px;
cursor: pointer;
z-index: 1;
}
.box #left {
background: url('http://cdn.attach.qdfuns.com/notes/pics/201701/14/042311cbd7gbjd7sggkd2b.png') no-repeat;
left: 0;
}
.box #right {
background: url('http://cdn.attach.qdfuns.com/notes/pics/201701/14/042241w8z4hx4m4pjhyjzs.png') no-repeat;
right: 0;
}
#ad {
width: 4000px;
height: 450px;
position: absolute;
}
#ad li {
float: left;
}
</style>
<script type = "text/javascript">
window.onload = function(){
var ad = document.getElementById("ad");
var timer = null;//管理定時器
var leader = 0;
//1秒之后再開啟定時器
timer = setTimeout(function(){
timer = setInterval(autoAd,30);
},1000);
//開啟定時器
function autoAd(){
leader -=5;
leader<=-3200?leader = 0:leader;
ad.style.left = leader +"px";
}
//鼠標劃入 關(guān)閉定時器
ad.onmouseover = function() {
clearInterval(timer);
}
//鼠標離開 開啟定時器
ad.onmouseout = function(){
timer = setInterval(autoAd,20);
}
}
</script>
</head>
<body>
<div class="box">
<ul id="ad">
<li><img src="http://cdn.attach.qdfuns.com/notes/pics/201701/14/042153lscsitwp7sszb6zs.jpg" alt=""></li>
<li><img src="http://cdn.attach.qdfuns.com/notes/pics/201701/14/042152pfbkbfe8vbtvulfu.jpg" alt=""></li>
<li><img src="http://cdn.attach.qdfuns.com/notes/pics/201701/14/042153u3jgn0ds43ndd3dz.jpg" alt=""></li>
<li><img src="http://cdn.attach.qdfuns.com/notes/pics/201701/14/042152juuohne22z60hbsb.jpg" alt=""></li>
<li><img src="http://cdn.attach.qdfuns.com/notes/pics/201701/14/042153lscsitwp7sszb6zs.jpg" alt=""></li>
</ul>
<span id="left"></span>
<span id="right"></span>
</div>
</body>
</html>
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
基于函數(shù)執(zhí)行的踩坑(addEventListener)
這篇文章主要介紹了基于函數(shù)執(zhí)行的踩坑(addEventListener)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
JavaScript移除數(shù)組內(nèi)重復元素的方法
這篇文章主要介紹了JavaScript移除數(shù)組內(nèi)重復元素的方法,實例分析了javascript遍歷數(shù)組及刪除等操作的相關(guān)技巧,需要的朋友可以參考下2015-03-03
本篇文章給大家詳細介紹了javascript中的隱式調(diào)用相關(guān)知識點，對此有興趣的可以跟著小編一起學習下。2018-02-02
這篇文章主要介紹了詳解js創(chuàng)建對象的幾種方式和對象方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-03-03
js實現(xiàn)ctrl+v粘貼上傳圖片(兼容chrome、firefox、ie11)
這篇文章主要為大家詳細介紹了js實現(xiàn)ctrl+v粘貼上傳圖片，兼容chrome，firefox，ie11，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-03-03
微信JS-SDK實現(xiàn)微信會員卡功能(給用戶微信卡包里發(fā)送會員卡)
這篇文章主要介紹了微信JS-SDK實現(xiàn)微信會員卡功能(給用戶微信卡包里發(fā)送會員卡)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-07-07
JavaScript實現(xiàn)網(wǎng)頁版的五子棋游戲
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)網(wǎng)頁版的五子棋游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
這篇文章主要為大家詳細介紹了HTML+JavaScript實現(xiàn)掃雷小游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
Echarts讀取動態(tài)數(shù)據(jù)完整代碼
這篇文章主要給大家介紹了關(guān)于Echarts讀取動態(tài)數(shù)據(jù)的相關(guān)資料,使用Echarts畫圖時,數(shù)據(jù)一般不是靜態(tài)寫死的,而是通過后端接口動態(tài)獲取的,需要的朋友可以參考下2023-10-10
這篇文章主要介紹了js實現(xiàn)圖片漂浮效果的方法,實例分析了javascript實現(xiàn)圖片漂浮的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03