JS圖像無縫滾動(dòng)腳本非常好用

更新時(shí)間：2014年02月10日 15:45:34 作者：

最好用的JS圖像無縫滾動(dòng)腳本，根據(jù)需要改改寬度和圖像個(gè)數(shù)就可以了,需要的朋友可以參考下

找了好長(zhǎng)時(shí)間，終于找到一個(gè)合適的了，根據(jù)需要改改寬度和圖像個(gè)數(shù)就可以了，用循環(huán)動(dòng)態(tài)調(diào)用數(shù)據(jù)庫代碼就OK了

 
<!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> 

您可能感興趣的文章:

無縫滾動(dòng)

相關(guān)文章

canvas+gif.js打造自己的數(shù)字雨頭像的示例代碼
本篇文章主要介紹了canvas+gif.js打造自己的數(shù)字雨頭像的示例代碼，這里整理了詳細(xì)的代碼，非常具有實(shí)用價(jià)值，需要的朋友可以參考下
2017-10-10
javascript消除window.close()的提示窗口
有人問起，怎么去掉js調(diào)用window.close()時(shí)怎么去掉那可惡的提示，咋一看好像還真不好弄，IE的安全機(jī)制好像就不允許通過腳本關(guān)閉本頁面，但是IE好像可以允許js關(guān)閉彈出窗口，那我們是不是可以通過一定的技巧欺騙一下IE，繞過去呢。鼓搗了幾下，似乎還真可以做到
2015-05-05
JS實(shí)現(xiàn)黑客帝國文字下落效果
看過黑客帝國的朋友或許都對(duì)開頭的字幕效果很熟悉，自從影片播放以來，網(wǎng)頁設(shè)計(jì)者有不少都在模仿這種文字下落的效果，而且還有文字漸變效果，對(duì)我們學(xué)習(xí)研究JS還是挺有幫助的哦，下面跟著小編一起學(xué)習(xí)JS 黑客帝國文字下落效果吧
2015-09-09
微信小程序修改數(shù)組長(zhǎng)度的問題的解決
這篇文章主要介紹了微信小程序修改數(shù)組長(zhǎng)度的問題的解決,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-12-12
微信小程序引入Vant框架的全過程記錄
Vant Weapp 是移動(dòng)端 Vue 組件庫 Vant 的小程序版本,兩者基于相同的視覺規(guī)范,提供一致的 API 接口,助力開發(fā)者快速搭建小程序應(yīng)用,這篇文章主要給大家介紹了關(guān)于微信小程序引入Vant框架的相關(guān)資料,需要的朋友可以參考下
2021-06-06
用正則獲取指定路徑文件的名稱
用正則獲取指定路徑文件的名稱...
2007-02-02
通過JS 獲取Mouse Position(鼠標(biāo)坐標(biāo))的代碼
最近我發(fā)現(xiàn)在webpage中獲取空間的絕對(duì)坐標(biāo)時(shí)，如果有滾動(dòng)條就會(huì)有錯(cuò)，后來用無名發(fā)現(xiàn)的方法得以解決。
2009-09-09
js獲取元素外鏈樣式的方法
這篇文章主要介紹了js獲取元素外鏈樣式的方法,分別在標(biāo)準(zhǔn)瀏覽器與IE瀏覽器兩種情況下實(shí)現(xiàn)獲取對(duì)應(yīng)樣式的功能,是非常實(shí)用的技巧,需要的朋友可以參考下
2015-01-01
小程序?qū)崿F(xiàn)圖片裁剪上傳
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)圖片裁剪上傳，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-05-05
詳解js靜態(tài)檢查工具eslint配置文件
這篇文章主要介紹了js靜態(tài)檢查工具eslint配置文件的相關(guān)知識(shí)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
2018-11-11