JS實(shí)現(xiàn)圖片橫向滾動(dòng)效果示例代碼
更新時(shí)間：2013年09月04日 16:35:06 作者：
圖片橫向滾動(dòng)效果，大家可能都已經(jīng)很熟悉了，本文為大家介紹下使用js實(shí)現(xiàn)橫向滾動(dòng)效果，喜歡的朋友可以參考下，希望對(duì)大家有所幫助
復(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>
<!-----------圖片Block的樣式-------------->
<style type="text/css">
.box{ margin:0 auto; height:70px; width:810px; padding:10px; border:1px solid #FF0000; }
.box img{ margin-right:20px;}
#goleft {width: 800px;height: 70px;overflow: hidden;}
#goleft #gols {width: 33100px;}
#goleft1, #goleft2 {width: auto;float: left;}
</style>
</head>
<body>
<!-----------圖片橫向滾動(dòng)Block-------------->
<div class="box">
<div id="goleft">
<div id="gols">
<div id="goleft1">
<a href="" ><img src="http://image.cnicif.com/big/2013/5/14/jpg20130514011700784.jpg" alt="6" width="100" height="70" /></a>
<a href="" ><img src="http://image.cnicif.com/big/2013/5/14/jpg20130514011612885.jpg" alt="5" width="100" height="70" /></a>
<a href="" ><img src="http://image.cnicif.com/big/2013/5/14/jpg20130514011552639.jpg" alt="4" width="100" height="70" /></a>
<a href="" ><img src="http://image.cnicif.com/big/2013/5/14/jpg20130514011502241.jpg" alt="3" width="100" height="70" /></a>
<a href="" ><img src="http://image.cnicif.com/big/2013/5/14/jpg20130514011344231.jpg" alt="2" width="100" height="70" /></a>
<a href="" ><img src="http://image.cnicif.com/big/2013/5/14/jpg20130514011113601.jpg" alt="1" width="100" height="70" /></a>
</div>
<div id="goleft2"></div>
</div>
</div>
</div>
<!-----------圖片滾動(dòng)結(jié)束-------------->
<script type="text/javascript">
//圖片滾動(dòng)JS代碼
var speed2=20;
var FGgoleft=document.getElementById('goleft');
var FGgoleft1=document.getElementById('goleft1');
var FGgoleft2=document.getElementById('goleft2');
FGgoleft2.innerHTML=FGgoleft1.innerHTML
function Marquee2(){
if(FGgoleft2.offsetWidth-FGgoleft.scrollLeft<=0)
{
FGgoleft.scrollLeft-=FGgoleft1.offsetWidth
}
else{
FGgoleft.scrollLeft++;
}
}
var MyMar2=setInterval(Marquee2,speed2)
FGgoleft.onmouseover=function() { clearInterval(MyMar2) }
FGgoleft.onmouseout=function() { MyMar2=setInterval(Marquee2,speed2) }
</script>
</body>
</html>
效果：
您可能感興趣的文章:
- JS實(shí)現(xiàn)長(zhǎng)圖上下滾動(dòng)效果
- JS圖片無(wú)縫、平滑滾動(dòng)代碼
- js實(shí)現(xiàn)圖片無(wú)縫滾動(dòng)特效
- 用js實(shí)現(xiàn)的一個(gè)Flash滾動(dòng)輪換顯示圖片代碼生成器
- JS實(shí)現(xiàn)div內(nèi)部的文字或圖片自動(dòng)循環(huán)滾動(dòng)代碼
- div+css布局的圖片連續(xù)滾動(dòng)js實(shí)現(xiàn)代碼
- js jquery做的圖片連續(xù)滾動(dòng)代碼
- JavaScript代碼實(shí)現(xiàn)圖片循環(huán)滾動(dòng)效果
- js實(shí)現(xiàn)圖片左右滾動(dòng)效果
- JavaScript實(shí)現(xiàn)長(zhǎng)圖滾動(dòng)效果
相關(guān)文章
在寫(xiě)js的時(shí)候,很多時(shí)候都會(huì)遇到異步轉(zhuǎn)同步的問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于JS中如何讓異步執(zhí)行的方法同步執(zhí)行的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-04-04
通過(guò)javascript實(shí)現(xiàn)掃雷游戲代碼實(shí)例
這篇文章主要介紹了通過(guò)javascript實(shí)現(xiàn)掃雷游戲代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-02-02
JavaScript實(shí)現(xiàn)跨瀏覽器的添加及刪除事件綁定函數(shù)實(shí)例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)跨瀏覽器的添加及刪除事件綁定函數(shù),采用純javascript實(shí)現(xiàn)jquery的bind及unbind添加與刪除事件綁定的技巧,具有很好的瀏覽器兼容性,需要的朋友可以參考下2015-08-08
這篇文章主要為大家詳細(xì)介紹了JS使用base64格式上傳文件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
使用JS實(shí)現(xiàn)導(dǎo)航切換時(shí)高亮顯示的示例講解
今天小編就為大家分享一篇使用JS實(shí)現(xiàn)導(dǎo)航切換時(shí)高亮顯示的示例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
通過(guò)bootstrap全面學(xué)習(xí)less
這篇文章主要為大家詳細(xì)介紹了如何通過(guò)bootstrap學(xué)習(xí)less,LESS CSS是一種動(dòng)態(tài)樣式語(yǔ)言，屬于CSS預(yù)處理語(yǔ)言的一種，感興趣的朋友可以參考下2016-11-11
JavaScript對(duì)象封裝的簡(jiǎn)單實(shí)現(xiàn)方法(3種方法)
這篇文章主要介紹了JavaScript對(duì)象封裝的簡(jiǎn)單實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了3種簡(jiǎn)單實(shí)現(xiàn)方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-01-01
微信小程序 自定義彈窗實(shí)現(xiàn)過(guò)程(附代碼)
這篇文章主要介紹了微信小程序 自定義彈窗實(shí)現(xiàn)過(guò)程(附代碼),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-12-12
微信小程序跨頁(yè)面數(shù)據(jù)傳遞事件響應(yīng)實(shí)現(xiàn)過(guò)程解析
這篇文章主要介紹了微信小程序跨頁(yè)面數(shù)據(jù)傳遞事件響應(yīng)實(shí)現(xiàn)過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-12-12
這篇文章主要介紹了JavaScript判斷對(duì)象是否為數(shù)組的三種方法,感興趣的小伙伴們可以參考一下2015-12-12