非常平滑的JS圖片滾動(dòng)特效代碼，無縫循環(huán)，速度可自定義，鼠標(biāo)懸停時(shí)停止。它的特點(diǎn)是JS和圖片地址分離，這樣做你就經(jīng)易的從數(shù)據(jù)庫動(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)文章

js實(shí)現(xiàn)索引圖片切換效果
這篇文章主要介紹了js實(shí)現(xiàn)索引圖片切換效果的代碼，特別炫酷的效果，推薦給大家，感興趣的小伙伴們可以參考一下
2015-11-11
javascript實(shí)現(xiàn)秒表計(jì)時(shí)器的制作方法
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)秒表計(jì)時(shí)器的制作方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-02-02
用js讀、寫、刪除Cookie代碼續(xù)篇
本文是上一篇文章《用js讀、寫、刪除Cookie代碼分享及詳細(xì)注釋說明》發(fā)現(xiàn)了些問題，進(jìn)行分析解決，推薦給大家
2014-12-12
解決layer.open后laydate失效的問題
今天小編就為大家分享一篇解決layer.open后laydate失效的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2019-09-09
淺談JavaScript的閉包函數(shù)
閉包是有權(quán)訪問另一個(gè)函數(shù)作用域中的變量的函數(shù)。首先要明白的就是，閉包是函數(shù)。由于要求它可以訪問另一個(gè)函數(shù)的作用于中的變量，所以我們往往是在一個(gè)函數(shù)的內(nèi)部創(chuàng)建另一個(gè)函數(shù)，而“另一個(gè)函數(shù)”就是閉包。本文對(duì)其進(jìn)行系統(tǒng)分析，需要的朋友可以看下
2016-12-12
微信小程序之側(cè)邊欄滑動(dòng)實(shí)現(xiàn)過程解析（附完整源碼）
這篇文章主要介紹了微信小程序之側(cè)邊欄滑動(dòng)實(shí)現(xiàn)過程解析（附完整源碼）,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-08-08
不用一句js代碼初始化組件
不用一句js代碼初始化組件，是不是很神奇？
2016-01-01
簡(jiǎn)單談?wù)刯son跨域
本文主要給大家講解了javascript中的json跨域問題，以及跨域安全性的解決辦法，總結(jié)了2點(diǎn)，分享給大家，希望大家能夠喜歡。
2016-03-03
實(shí)用又漂亮的BootstrapValidator表單驗(yàn)證插件
這篇文章主要為大家詳細(xì)介紹了好用又漂亮的BootstrapValidator表單驗(yàn)證插件，感興趣的小伙伴們可以參考一下
2016-05-05
js校驗(yàn)開始時(shí)間和結(jié)束時(shí)間
這篇文章主要為大家詳細(xì)介紹了js校驗(yàn)開始結(jié)束時(shí)間，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-05-05