js實(shí)現(xiàn)無(wú)縫循環(huán)滾動(dòng)
本文實(shí)例為大家分享了js無(wú)縫循環(huán)滾動(dòng)實(shí)現(xiàn)代碼,供大家參考,具體內(nèi)容如下
1、圖片格式:260*400.
2、使用循環(huán)定時(shí)器輕松實(shí)現(xiàn)
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>無(wú)縫滾動(dòng)</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>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助。
- JS左右無(wú)縫滾動(dòng)(一般方法+面向?qū)ο蠓椒ǎ?/a>
- 原生JavaScript實(shí)現(xiàn)的無(wú)縫滾動(dòng)功能詳解
- JS圖片無(wú)縫、平滑滾動(dòng)代碼
- 徹底搞懂JS無(wú)縫滾動(dòng)代碼
- js實(shí)現(xiàn)圖片無(wú)縫滾動(dòng)特效
- js向上無(wú)縫滾動(dòng),網(wǎng)站公告效果 具體代碼
- jcarousellite.js 基于Jquery的圖片無(wú)縫滾動(dòng)插件
- javascript實(shí)現(xiàn)的左右無(wú)縫滾動(dòng)效果
- js實(shí)現(xiàn)可控制左右方向的無(wú)縫滾動(dòng)效果
- 鏈接圖片無(wú)縫(無(wú)間斷)向左平滑滾動(dòng)Js版代碼
- js實(shí)現(xiàn)文字列表無(wú)縫滾動(dòng)效果
- JavaScript基于面向?qū)ο髮?shí)現(xiàn)的無(wú)縫滾動(dòng)輪播示例
相關(guān)文章
js實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)效果(簡(jiǎn)單易懂)
本文主要介紹了js實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)效果的示例代碼,簡(jiǎn)單易懂。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03javascript無(wú)刷新評(píng)論實(shí)現(xiàn)方法
這篇文章主要介紹了javascript無(wú)刷新評(píng)論實(shí)現(xiàn)方法,涉及javascript動(dòng)態(tài)添加表格元素的技巧,需要的朋友可以參考下2015-05-05整理Javascript事件響應(yīng)學(xué)習(xí)筆記
整理Javascript事件響應(yīng)學(xué)習(xí)筆記,之前一系列的文章是跟我學(xué)習(xí)Javascript,本文就是進(jìn)一步學(xué)習(xí)javascript流程控制語(yǔ)句,希望大家繼續(xù)關(guān)注2015-12-12詳解使用Next.js構(gòu)建服務(wù)端渲染應(yīng)用
這篇文章主要介紹了詳解使用Next.js構(gòu)建服務(wù)端渲染應(yīng)用,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07微信小程序拍賣商品詳情頁(yè)設(shè)計(jì)與交互實(shí)現(xiàn)代碼(含倒計(jì)時(shí)、實(shí)時(shí)更新出價(jià))
這篇文章主要介紹了微信小程序拍賣商品詳情頁(yè)設(shè)計(jì)與交互實(shí)現(xiàn)代碼(含倒計(jì)時(shí)、實(shí)時(shí)更新出價(jià)),本文通過(guò)示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-08-08微信小程序module.exports模塊化操作實(shí)例淺析
這篇文章主要介紹了微信小程序module.exports模塊化操作,結(jié)合實(shí)例形式簡(jiǎn)單分析了module.exports模塊化的定義與引用相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下2018-12-12JavaScript 報(bào)表展示實(shí)現(xiàn)代碼
以下是從網(wǎng)上找到的一段JavaScript實(shí)現(xiàn)圖形報(bào)表的代碼,對(duì)于想客戶端顯示報(bào)表的朋友可以參考下。2009-12-12javascript完整操作Table的增加行,刪除行的列子大全
非常漂亮的js操作table行代碼函數(shù)。比較方便2008-10-10