快捷導(dǎo)航

JS圖片無(wú)縫、平滑滾動(dòng)代碼

更新時(shí)間：2014年03月11日 15:58:56 作者：

這篇文章主要介紹了JS圖片無(wú)縫、平滑滾動(dòng)的實(shí)現(xiàn),需要的朋友可以參考下

非常平滑的JS圖片滾動(dòng)特效代碼，無(wú)縫循環(huán)，速度可自定義，鼠標(biāo)懸停時(shí)停止。它的特點(diǎn)是JS和圖片地址分離，這樣做你就經(jīng)易的從數(shù)據(jù)庫(kù)動(dòng)態(tài)調(diào)用每張圖片的地址，方便控制，因此它非常的應(yīng)用。

復(fù)制代碼代碼如下:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>圖片滾動(dòng)</title> 
</head> 
<body> 
<style type="text/css"> 
<!-- 
#demo { 
background: #FFF; 
overflow:hidden; 
border: 1px dashed #CCC; 
width: 500px; 
} 
#demo img { 
border: 3px solid #F2F2F2; 
} 
#indemo { 
float: left; 
width: 800%; 
} 
#demo1 { 
float: left; 
} 
#demo2 { 
float: left; 
} 
--> 
</style> 
<div id="demo"> 
<div id="indemo"> 
<div id="demo1"> 
<a href="#"><img src="/jscss/demoimg/wall_s1.jpg" border="0" /></a> 
<a href="#"><img src="/jscss/demoimg/wall_s2.jpg" border="0" /></a> 
<a href="#"><img src="/jscss/demoimg/wall_s3.jpg" border="0" /></a> 
<a href="#"><img src="/jscss/demoimg/wall_s4.jpg" border="0" /></a> 
<a href="#"><img src="/jscss/demoimg/wall_s5.jpg" border="0" /></a> 
<a href="#"><img src="/jscss/demoimg/wall_s6.jpg" border="0" /></a> 
</div> 
<div id="demo2"></div> 
</div> 
</div> 
<script> 
<!-- 
var speed=10; 
var tab=document.getElementById("demo"); 
var tab1=document.getElementById("demo1"); 
var tab2=document.getElementById("demo2"); 
tab2.innerHTML=tab1.innerHTML; 
function Marquee(){ 
if(tab2.offsetWidth-tab.scrollLeft<=0) 
tab.scrollLeft-=tab1.offsetWidth 
else{ 
tab.scrollLeft++; 
} 
} 
var MyMar=setInterval(Marquee,speed); 
tab.onmouseover=function() {clearInterval(MyMar)}; 
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)}; 
--> 
</script> 
</body> 
</html> 

您可能感興趣的文章:

相關(guān)文章

JavaScript實(shí)現(xiàn)找質(zhì)數(shù)代碼分享
這篇文章主要介紹了JavaScript實(shí)現(xiàn)找質(zhì)數(shù)代碼分享,本文直接給出實(shí)現(xiàn)代碼,需要的朋友可以參考下
2015-03-03
對(duì)象特征檢測(cè)法判斷瀏覽器對(duì)javascript對(duì)象的支持
就是將需要檢測(cè)的方法/對(duì)象作為if語(yǔ)句的判斷條件，具體做法如下
2009-07-07
深入了解Javascript的事件循環(huán)機(jī)制
單線程的同步等待極大影響效率，任務(wù)不得不一個(gè)一個(gè)等待執(zhí)行，對(duì)于網(wǎng)頁(yè)應(yīng)用是無(wú)法接受的。所以Javascript使用事件循環(huán)機(jī)制來(lái)解決異步任務(wù)的問(wèn)題。本文就來(lái)講講Javascript的事件循環(huán)機(jī)制，希望對(duì)你有所幫助
2022-09-09
Javascript腳本獲取form和input內(nèi)容的方法(兩種方法)
隨著js的發(fā)展，許多的網(wǎng)頁(yè)數(shù)據(jù)處理完全可以由js腳本解決，而不需要發(fā)送到服務(wù)器，這里分享兩種Javascript腳本獲取form和input內(nèi)容的方法，感興趣的朋友跟隨小編一起看看吧
2023-05-05
JS判斷傳入函數(shù)的參數(shù)是否為空(函數(shù)參數(shù)是否傳遞)
這篇文章主要介紹了JS判斷傳入函數(shù)的參數(shù)是否為空(函數(shù)參數(shù)是否傳遞),需要的朋友可以參考下
2023-05-05
javascript編程開(kāi)發(fā)中取色器及封裝$函數(shù)用法示例
這篇文章主要介紹了javascript編程開(kāi)發(fā)中取色器及封裝$函數(shù),結(jié)合實(shí)例形式分析了javascript封裝$函數(shù)及數(shù)值運(yùn)算、頁(yè)面元素動(dòng)態(tài)操作實(shí)現(xiàn)取色器功能相關(guān)技巧,需要的朋友可以參考下
2017-08-08
微信小程序?qū)崿F(xiàn)卡片左右滑動(dòng)效果的示例代碼
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)卡片左右滑動(dòng)效果的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-05-05
快速解決layui彈窗按enter鍵不停彈窗的問(wèn)題
今天小編就為大家分享一篇快速解決layui彈窗按enter鍵不停彈窗的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-09-09
javascript Excel操作知識(shí)點(diǎn)
使用JavaScript中的ActiveXObject填充并設(shè)置Excel格式
2009-04-04
layui對(duì)工具條進(jìn)行選擇性的顯示方法
今天小編就為大家分享一篇layui對(duì)工具條進(jìn)行選擇性的顯示方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-09-09