js實現(xiàn)無縫循環(huán)滾動
更新時間：2020年06月23日 17:30:00 作者：Mr.小Y
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)無縫循環(huán)滾動的具體代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js無縫循環(huán)滾動實現(xiàn)代碼，供大家參考，具體內(nèi)容如下
1、圖片格式：260*400.
2、使用循環(huán)定時器輕松實現(xiàn)
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>無縫滾動</title>
</head>
<style type="text/css">
.row{
width: 1298px;
height: 400px;
border: 1px solid;
box-shadow:2px 2px 2px #000;
overflow: hidden;
}
.box{
position: relative;
}
.box1,.box2{
width: 1298px;
position: absolute;
}
.box2{
left:1298px;
}
img{
float: left;
}
</style>
<body>
<div class="row">
<div class="box" id="box">
<div class="box1" id="box1">
<img src="images/1.jpg">
<img src="images/2.jpg">
<img src="images/3.jpg">
<img src="images/4.jpg">
<img src="images/5.jpg">
</div>
<div class="box2" id="box2">
<img src="images/1.jpg">
<img src="images/2.jpg">
<img src="images/3.jpg">
<img src="images/4.jpg">
<img src="images/5.jpg">
</div>
</div>
</div>
</body>
<script type="text/javascript">
window.onload = function(){
var _box1 = document.getElementById("box1");
var _box2 = document.getElementById("box2");
var x = 0;
var fun = function(){
_box1.style.left = x + 'px';
_box2.style.left = (x +1298) + 'px';
x--;
if((x +1298) == 0){
x = 0;
}
}
setInterval(fun,1);
}
</script>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助。
您可能感興趣的文章:
相關(guān)文章
詰屈聱牙之javascript中國象棋...2007-04-04
這篇文章主要介紹了Nuxt.js 實戰(zhàn)集錦,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
這篇文章主要為大家詳細(xì)介紹了手機端js和html5刮刮卡效果，刮開之后是隨機生成的8位碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
JavaScript中Location.search處理使用方法
本文主要介紹了JavaScript中Location.search處理使用方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
你真的知道setTimeout是如何運行的嗎？這篇文章主要介紹了setTimeout運行方式，感興趣的小伙伴們可以參考一下2016-08-08
這篇文章主要介紹了JS集合set類的實現(xiàn)與使用方法,結(jié)合具體實例形式分析了javascript集合的創(chuàng)建、元素添加、刪除以及并集、交集、補集等運算相關(guān)操作技巧,需要的朋友可以參考下2019-02-02
JS實現(xiàn)集合的交集、補集、差集、去重運算示例【ES5與ES6寫法】
這篇文章主要介紹了JS實現(xiàn)集合的交集、補集、差集、去重運算,結(jié)合實例形式分析了ES5與ES6語法環(huán)境下的集合常見運算操作技巧,需要的朋友可以參考下2019-02-02
微信小程序自定義select下拉選項框組件的實現(xiàn)代碼
微信小程序中沒有select下拉選項框，所以只有自定義。這篇文章主要介紹了微信小程序自定義select下拉選項框組件,需要的朋友可以參考下2018-08-08
前端實現(xiàn)（excel）xlsx文件預(yù)覽的詳細(xì)步驟
excel的預(yù)覽庫有不少,也都很強大,但是能很簡單實現(xiàn),下面這篇文章主要給大家介紹了關(guān)于前端實現(xiàn)（excel）xlsx文件預(yù)覽的詳細(xì)步驟,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-03-03
Js實現(xiàn)兩個跨域頁面進(jìn)行跳轉(zhuǎn)傳參的方案詳解
這篇文章主要為大家詳細(xì)介紹了JavaScript中實現(xiàn)兩個跨域頁面進(jìn)行跳轉(zhuǎn)傳參的方案,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-12-12