JS實現(xiàn)圖片無間斷滾動代碼匯總
更新時間：2014年07月30日 10:06:09 投稿：shichen2014
這篇文章主要介紹了JS實現(xiàn)圖片無間斷滾動代碼匯總,非常實用的特效代碼,需要的朋友可以參考下
本文整理匯總了JavaScript實現(xiàn)圖片滾動的常見代碼，可以實現(xiàn)向上下左右四個方向的無縫滾動的效果，這是前端設計開發(fā)時常用的一個圖片特效，你可只用其中的一種滾動效果。
具體的實例代碼如下：
<!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>圖片滾動代碼合集</title>
<script type="text/javascript">
// 自動滾動
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>滾動合集</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>手動滾動 - <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>手動滾動 - <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>
相關(guān)文章
大家有沒有想過，一段javascript腳本從載入瀏覽器到顯示執(zhí)行都經(jīng)過了哪些流程，其執(zhí)行次序又是如何。本篇博文將引出'javascript執(zhí)行模型'的概念，并帶領大家理解javascript在執(zhí)行時的處理機制。2010-10-10
這篇文章主要為大家詳細介紹了Openlayers實現(xiàn)測量功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
如何遍歷DOM對象內(nèi)的元素屬性，例如要獲取一個id為btn的按鈕的所有屬性該怎么實現(xiàn)呢？下面有個不錯的教程，大家可以參考下2014-02-02
這篇文章主要為大家詳細介紹了Bootstrap基本插件學習筆記之按鈕的相關(guān)資料,實現(xiàn)按鈕狀態(tài)控制等形式的交互，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
JavaScript驗證圖片類型(擴展名)的函數(shù)分享
這篇文章主要介紹了JavaScript驗證圖片類型的函數(shù)分享,需要的朋友可以參考下2014-05-05
js常用方法、檢查是否有特殊字符串、倒序截取字符串操作完整示例
這篇文章主要介紹了js常用方法、檢查是否有特殊字符串、倒序截取字符串操作,結(jié)合完整實例形式分析了JavaScript字符串轉(zhuǎn)換、檢測、倒序、截取等相關(guān)操作技巧,需要的朋友可以參考下2020-01-01
ES6代碼轉(zhuǎn)ES5詳細教程(babel安裝使用教程)
Babel 是一個廣泛使用的 ES6 轉(zhuǎn)碼器，可以將 ES6 代碼轉(zhuǎn)為 ES5 代碼，從而在老版本的瀏覽器執(zhí)行，這意味著，你可以用 ES6 的方式編寫程序，又不用擔心現(xiàn)有環(huán)境是否支持，這篇文章主要介紹了ES6代碼轉(zhuǎn)ES5教程(babel安裝使用教程),需要的朋友可以參考下2023-01-01
ASP 過濾數(shù)組重復數(shù)據(jù)函數(shù)(加強版)
asp 不重復數(shù)組數(shù)據(jù)的實現(xiàn)代碼，比上個版本，更細，更能更強，大家可以根據(jù)需要選擇。2010-05-05
JavaScript實現(xiàn)的in_array函數(shù)
這篇文章主要介紹了JavaScript實現(xiàn)的in_array函數(shù),用于判斷一個值是否在數(shù)組中,類似PHP的in_array函數(shù),需要的朋友可以參考下2014-08-08
閉包是js的一個難點也是它的一個特色,是我們必須掌握的js高級特性,下面這篇文章主要給大家介紹了關(guān)于JavaScript閉包函數(shù)的相關(guān)資料,需要的朋友可以參考下2022-11-11