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