JS實(shí)現(xiàn)圖片無(wú)間斷滾動(dòng)代碼匯總
更新時(shí)間：2014年07月30日 10:06:09 投稿：shichen2014
這篇文章主要介紹了JS實(shí)現(xiàn)圖片無(wú)間斷滾動(dòng)代碼匯總,非常實(shí)用的特效代碼,需要的朋友可以參考下
本文整理匯總了JavaScript實(shí)現(xiàn)圖片滾動(dòng)的常見(jiàn)代碼，可以實(shí)現(xiàn)向上下左右四個(gè)方向的無(wú)縫滾動(dòng)的效果，這是前端設(shè)計(jì)開(kāi)發(fā)時(shí)常用的一個(gè)圖片特效，你可只用其中的一種滾動(dòng)效果。
具體的實(shí)例代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN" xml:lang="zh-CN">
<head>
<title>圖片滾動(dòng)代碼合集</title>
<script type="text/javascript">
// 自動(dòng)滾動(dòng)
function boxmove(d1,d2,d3,e,obj){
var speed=30;
var demo=document.getElementById(d1);
var demo1=document.getElementById(d2);
var demo2=document.getElementById(d3);
demo2.innerHTML=demo1.innerHTML;
function boxTop(){
if(demo2.offsetTop-demo.scrollTop<=0){demo.scrollTop-=demo1.offsetHeight}
else{demo.scrollTop++}
}
function boxRight(){
if(demo.scrollLeft<=0){demo.scrollLeft+=demo2.offsetWidth}
else{demo.scrollLeft--}
}
function boxBottom(){
if(demo1.offsetTop-demo.scrollTop>=0){demo.scrollTop+=demo2.offsetHeight}
else{demo.scrollTop--}
}
function boxLeft(){
if(demo2.offsetWidth-demo.scrollLeft<=0){demo.scrollLeft-=demo1.offsetWidth}
else{demo.scrollLeft++}
}
if(e==1){
var MoveTop=setInterval(boxTop,speed);
demo.onmouseover=function(){clearInterval(MoveTop);}
demo.onmouseout=function(){MoveTop=setInterval(boxTop,speed)}
}
if(e==2){
var MoveRight=setInterval(boxRight,speed);
demo.onmouseover=function(){clearInterval(MoveRight)}
demo.onmouseout=function(){MoveRight=setInterval(boxRight,speed)}
}
if(e==3){
var MoveBottom=setInterval(boxBottom,speed);
demo.onmouseover=function(){clearInterval(MoveBottom);}
demo.onmouseout=function(){MoveBottom=setInterval(boxBottom,speed)}
}
if(e==4){
var MoveLeft=setInterval(boxLeft,speed)
demo.onmouseover=function(){clearInterval(MoveLeft)}
demo.onmouseout=function(){MoveLeft=setInterval(boxLeft,speed)}
}
if(e=="top"){
MoveTop=setInterval(boxTop,speed)
obj.onmouseout=function(){clearInterval(MoveTop);}
}
if(e=="right"){
MoveRight=setInterval(boxRight,speed)
obj.onmouseout=function(){clearInterval(MoveRight);}
}
if(e=="bottom"){
MoveBottom=setInterval(boxBottom,speed)
obj.onmouseout=function(){clearInterval(MoveBottom);}
}
if(e=="left"){
MoveLeft=setInterval(boxLeft,speed)
obj.onmouseout=function(){clearInterval(MoveLeft);}
}
}
</script>
<style type="text/css">
div#a,div#b,div#c,div#d { float:left;}
h2 { clear:both; }
div#b,div#d,div#bb { white-space:nowrap; }
</style>
</head>
<body>
<h1>滾動(dòng)合集</h1>
<hr />
<h2>向上</h2>
<div id="a" style="overflow:hidden;height:100px;width:90px;">
<div id="a1">
<img src="/images/logo.gif1" alt="" />
<img src="/images/logo.gif2" alt="" />
<img src="/images/logo.gif3" alt="" />
<img src="/images/logo.gif4" alt="" />
<img src="/images/logo.gif5" alt="" />
<img src="/images/logo.gif6" alt="" />
<img src="/images/logo.gif7" alt="" />
<img src="/images/logo.gif8" alt="" />
</div>
<div id="a2"></div>
</div>
<script type="text/javascript">
boxmove("a","a1","a2",1);
</script>
<h2>向右</h2>
<div id="b" style="overflow:hidden;height:100px;width:90px;">
<div id="b1">
<img src="/images/logo.gif1" alt="" />
<img src="/images/logo.gif2" alt="" />
<img src="/images/logo.gif3" alt="" />
<img src="/images/logo.gif4" alt="" />
<img src="/images/logo.gif5" alt="" />
<img src="/images/logo.gif6" alt="" />
<img src="/images/logo.gif7" alt="" />
<img src="/images/logo.gif8" alt="" />
</div>
<div id="b2"></div>
</div>
<script type="text/javascript">
boxmove("b","b1","b2",2);
</script>
<h2>向下</h2>
<div id="c" style="overflow:hidden;height:100px;width:90px;">
<div id="c1">
<img src="/images/logo.gif1" alt="" />
<img src="/images/logo.gif2" alt="" />
<img src="/images/logo.gif3" alt="" />
<img src="/images/logo.gif4" alt="" />
<img src="/images/logo.gif5" alt="" />
<img src="/images/logo.gif6" alt="" />
<img src="/images/logo.gif7" alt="" />
<img src="/images/logo.gif8" alt="" />
</div>
<div id="c2"></div>
</div>
<script type="text/javascript">
boxmove("c","c1","c2",3);
</script>
<h2>向左</h2>
<div id="d" style="overflow:hidden;height:100px;width:90px;">
<div id="d1">
<img src="/images/logo.gif1" alt="" />
<img src="/images/logo.gif2" alt="" />
<img src="/images/logo.gif3" alt="" />
<img src="/images/logo.gif4" alt="" />
<img src="/images/logo.gif5" alt="" />
<img src="/images/logo.gif6" alt="" />
<img src="/images/logo.gif7" alt="" />
<img src="/images/logo.gif8" alt="" />
</div>
<div id="d2"></div>
</div>
<script type="text/javascript">
boxmove("d","d1","d2",4);
</script>
<h2>手動(dòng)滾動(dòng) - <strong onmouseover="boxmove('aa','aa1','aa2','top',this);">上</strong> <strong onmouseover="boxmove('aa','aa1','aa2','bottom',this);">下</strong></h2>
<div id="aa" style="overflow:hidden;height:100px;width:90px;">
<div id="aa1">
<img src="/images/logo.gif1" alt="" />
<img src="/images/logo.gif2" alt="" />
<img src="/images/logo.gif3" alt="" />
<img src="/images/logo.gif4" alt="" />
<img src="/images/logo.gif5" alt="" />
<img src="/images/logo.gif6" alt="" />
<img src="/images/logo.gif7" alt="" />
<img src="/images/logo.gif8" alt="" />
</div>
<div id="aa2"></div>
</div>
<h2>手動(dòng)滾動(dòng) - <strong onmouseover="boxmove('bb','bb1','bb2','left',this);">左</strong> <strong onmouseover="boxmove('bb','bb1','bb2','right',this);">右</strong></h2>
<div id="bb" style="overflow:hidden;height:100px;width:90px;">
<div id="bb1">
<img src="/images/logo.gif1" alt="" />
<img src="/images/logo.gif2" alt="" />
<img src="/images/logo.gif3" alt="" />
<img src="/images/logo.gif4" alt="" />
<img src="/images/logo.gif5" alt="" />
<img src="/images/logo.gif6" alt="" />
<img src="/images/logo.gif7" alt="" />
<img src="/images/logo.gif8" alt="" />
</div>
<div id="bb2"></div>
</div>
</body>
</html>
您可能感興趣的文章:
- js圖片滾動(dòng)效果時(shí)間可隨意設(shè)定當(dāng)鼠標(biāo)移上去時(shí)停止
- JS圖片無(wú)縫、平滑滾動(dòng)代碼
- js+div實(shí)現(xiàn)圖片滾動(dòng)效果代碼
- 可自定義速度的js圖片無(wú)縫滾動(dòng)示例分享
- js圖片向右一張張滾動(dòng)效果實(shí)例代碼
- 圖片動(dòng)畫(huà)橫條廣告帶上下滾動(dòng)的JS代碼
- JS實(shí)現(xiàn)圖片橫向滾動(dòng)效果示例代碼
- 原生Js頁(yè)面滾動(dòng)延遲加載圖片實(shí)現(xiàn)原理及過(guò)程
- JS圖片無(wú)縫滾動(dòng)(簡(jiǎn)單利于使用)
相關(guān)文章
解決eclipse中沒(méi)有js代碼提示的問(wèn)題
今天小編就為大家分享一篇解決eclipse中沒(méi)有js代碼提示的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
基于JavaScript實(shí)現(xiàn)帶縮略圖的輪播效果
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)帶縮略圖的輪播效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
之前提到了JS中比較簡(jiǎn)單的設(shè)計(jì)模式，在各種設(shè)計(jì)模式中被最常使用的工具之一就是原型鏈的繼承。作為OOP的特質(zhì)之一——繼承，今天主要談?wù)凧S中比較簡(jiǎn)單的繼承方法2016-01-01
再讀《JavaScript權(quán)威指南》（犀牛書(shū)）9.7確定對(duì)象類型 之摘錄2012-03-03
js關(guān)閉當(dāng)前頁(yè)面(窗口)的幾種方式總結(jié)
js關(guān)閉當(dāng)前頁(yè)面(窗口)的幾種方式總結(jié)，需要的朋友可以參考一下2013-03-03
文本框只能輸入數(shù)字的實(shí)現(xiàn)方法(兼容IE火狐)
下面小編就為大家?guī)?lái)一篇文本框只能輸入數(shù)字的實(shí)現(xiàn)方法(兼容IE火狐)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06
js監(jiān)聽(tīng)html頁(yè)面的上下滾動(dòng)事件方法
今天小編就為大家分享一篇js監(jiān)聽(tīng)html頁(yè)面的上下滾動(dòng)事件方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
JS動(dòng)態(tài)修改表格cellPadding和cellSpacing的方法
這篇文章主要介紹了JS動(dòng)態(tài)修改表格cellPadding和cellSpacing的方法,涉及javascript操作cellPadding和cellSpacing屬性的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
JavaScript觀察者模式(publish/subscribe)原理與實(shí)現(xiàn)方法
這篇文章主要介紹了JavaScript觀察者模式(publish/subscribe)原理與實(shí)現(xiàn)方法,簡(jiǎn)單分析了javascript觀察者模式的原理、功能并結(jié)合實(shí)例形式給出了觀察者模式的實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-03-03
項(xiàng)目中需要FusionCharts圖表顯示雙Y軸，好像FCF_MSLine.swf不可以這樣，只能顯示一個(gè)Y軸，多條線,找了一下，用MSCombiDY2D.swf可以實(shí)現(xiàn),現(xiàn)在曬出來(lái)和大家分享一下2012-11-11