JS圖片左右無縫隙滾動的實(shí)現(xiàn)(兼容IE,Firefox 遵循W3C標(biāo)準(zhǔn))
更新時(shí)間：2016年09月23日 07:25:18 投稿：jingxian
下面小編就為大家?guī)硪黄狫S圖片左右無縫隙滾動的實(shí)現(xiàn)(兼容IE,Firefox 遵循W3C標(biāo)準(zhǔn))。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
**兼容IE,Firefox 遵循W3C標(biāo)準(zhǔn)寫法的圖片無縫滾動代碼（支持左移/右移功能）(本示例為上下兩行圖片進(jìn)行雙行滾動)
**實(shí)現(xiàn)思路：一個(gè)設(shè)定寬度并且隱藏超出它寬度的內(nèi)容的容器demo，里面放demo1和demo2，demo1是滾動內(nèi)容,demo2為demo1的直接克隆，
**通過不斷改變demo1的scrollTop或者scrollLeft達(dá)到滾動的目的，當(dāng)滾動至demo1與demo2的交界處時(shí)直接跳回初始位置，
**因?yàn)閐emo1與demo2一樣，所以分不出跳動的瞬間，從而達(dá)到“無縫”滾動的目的。
Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--><!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 id="Head1" runat="server">
<title></title>
</head>
<body>
<img src="link.gif" style="cursor: pointer" onmouseover="clearright();toleft()" />
<img src="link1.gif" style="cursor: pointer" onmouseover="clearleft();toright()" />
<div>
<div id="demo" style="overflow: hidden; width: 322px; height: 61px">
<table cellpadding="0" align="left" border="0" cellspace="0">
<tbody>
<tr>
<td id="demo1" valign="top">
<table cellspacing="0" cellpadding="0" width="322" bgcolor="#fffbf7" border="0">
<tbody>
<tr align="center">
<td width="50" height="50">
<img height="50" src="link.gif" />
</td>
<td width="50" height="50">
<img height="50" src="link1.gif" />
</td>
<td width="50" height="50">
<img height="50" src="link2.gif" />
</td>
<td width="50" height="50">
<img height="50" src="link.gif" />
</td>
<td width="50" height="50">
<img height="50" src="link3.gif" />
</td>
</tr>
</tbody>
</table>
</td>
<td id="demo2" valign="top">
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div>
<div id="demo_a" style="overflow: hidden; width: 322px; height: 61px">
<table cellpadding="0" align="left" border="0" cellspace="0">
<tbody>
<tr>
<td id="demo_b" valign="top">
<table cellspacing="0" cellpadding="0" width="322" bgcolor="#fffbf7" border="0">
<tbody>
<tr align="center">
<td width="50" height="50">
<img height="50" src="link.gif" />
</td>
<td width="50" height="50">
<img height="50" src="link1.gif" />
</td>
<td width="50" height="50">
<img height="50" src="link2.gif" />
</td>
<td width="50" height="50">
<img height="50" src="link.gif" />
</td>
<td width="50" height="50">
<img height="50" src="link3.gif" />
</td>
</tr>
</tbody>
</table>
</td>
<td id="demo_c" valign="top">
</td>
</tr>
</tbody>
</table>
</div>
</div>
<script type="text/javascript">
/*
**兼容IE,Firefox 遵循W3C標(biāo)準(zhǔn)寫法的圖片無縫滾動代碼（支持左移/右移功能）(本示例為上下兩行圖片進(jìn)行雙行滾動)
**
**實(shí)現(xiàn)思路：一個(gè)設(shè)定寬度并且隱藏超出它寬度的內(nèi)容的容器demo，里面放demo1和demo2，demo1是滾動內(nèi)容,demo2為demo1的直接克隆，
**通過不斷改變demo1的scrollTop或者scrollLeft達(dá)到滾動的目的，當(dāng)滾動至demo1與demo2的交界處時(shí)直接跳回初始位置，
**因?yàn)閐emo1與demo2一樣，所以分不出跳動的瞬間，從而達(dá)到“無縫”滾動的目的。
*/
var speed1=0 //圖片左移的速度
var MyMar1 //setInterverval方法返回的間隔ID,些ID為全局的調(diào)用次數(shù)(用于第一行圖片)
var MyMar2 //setInterverval方法返回的間隔ID,些ID為全局的調(diào)用次數(shù)(用于第二行圖片)
var lefthit=0 //記錄左移按鈕點(diǎn)擊次數(shù)
var righthit=0 ////記錄右移按鈕點(diǎn)擊次數(shù)
//調(diào)用右移方法前,先讓左移停止（clearInterval清除setInterval對方法的調(diào)用）
function clearleft(){
clearInterval(MyMar1)
clearInterval(MyMar2)
}
//圖片左移的方法
function toleft(){
//判斷是否是第一次按下左移按鈕（圖片往左開始移動的時(shí)候，不會在調(diào)用此方法。只有當(dāng)按了右移按鈕時(shí)，才會把lefthit重設(shè)為0）
if(lefthit==0){
speed1=30;//圖片左移速度時(shí)間毫秒
//讓的內(nèi)容demo2與demo1內(nèi)容一樣
document.getElementById("demo2").innerHTML=document.getElementById("demo1").innerHTML
//上行圖片移動的方法
function Marquee1(){
//當(dāng)demo滾動至demo2的交界處。與就是與demo2重合時(shí)。offsetWidth與scrollLeft剛好相等
if(document.getElementById("demo2").offsetWidth-document.getElementById("demo").scrollLeft<=0){
//demo跳回初始位置
document.getElementById("demo").scrollLeft-=document.getElementById("demo1").offsetWidth
}
else{
//demo開始重新移動
document.getElementById("demo").scrollLeft++
}
}
//setInterval讓Marquee1方法每隔多少秒執(zhí)行一次，并把返回的調(diào)用次數(shù)ID
MyMar1=setInterval(Marquee1,speed1)
//當(dāng)鼠標(biāo)移動demo上面時(shí)。調(diào)用clearInterval清除MyMar1.這樣圖片便不會在移動了。移到圖片時(shí)，第一行和第二行的圖片都會停止
document.getElementById("demo").onmouseover=function()
{clearInterval(MyMar1);clearInterval(MyMar2)}
//當(dāng)鼠標(biāo)移除demo時(shí),重新setInterval讓方法執(zhí)行，這樣圖片會繼續(xù)移動
document.getElementById("demo").onmouseout=function()
{MyMar1=setInterval(Marquee1,speed1);clearInterval(MyMar2);MyMar2=setInterval(Marquee2,speed1)}
//下面的方法與上面的方法一樣，用于第二行的圖片向左移動
document.getElementById("demo_c").innerHTML=document.getElementById("demo_b").innerHTML
function Marquee2(){
if(document.getElementById("demo_c").offsetWidth-document.getElementById("demo_a").scrollLeft<=0){
document.getElementById("demo_a").scrollLeft-=document.getElementById("demo_b").offsetWidth}
else{
document.getElementById("demo_a").scrollLeft++
}
}
MyMar2=setInterval(Marquee2,speed1)
document.getElementById("demo_a").onmouseover=function()
{clearInterval(MyMar2);clearInterval(MyMar1)}
document.getElementById("demo_a").onmouseout=function()
{MyMar2=setInterval(Marquee2,speed1); document.getElementById("demo").onmouseout()}
lefthit=1 //設(shè)置左移按鈕，當(dāng)按了一次左移后(不管按多少次)，在沒按右移按鈕之前，toleft方法里的的代碼不會再被執(zhí)行
righthit=0 //把右移按鈕設(shè)為0,這樣當(dāng)下次點(diǎn)了右移按鈕的時(shí)候，以便toright方法被調(diào)用
}
}
var MyMar3 //setInterverval方法返回的間隔ID,些ID為全局的調(diào)用次數(shù)(用于第一行圖片)
var MyMar4 //setInterverval方法返回的間隔ID,些ID為全局的調(diào)用次數(shù)(用于第二行圖片)
var speed2=0 //圖片右移的速度
//調(diào)用移左方法前,先讓右移停止（clearInterval清除setInterval對方法的調(diào)用）
function clearright(){
clearInterval(MyMar3)
clearInterval(MyMar4)
}
//圖片右移方法(與圖片左移方法思路一樣)
function toright(){
//判斷是否是第一次按下右移按鈕（圖片往右開始移動的時(shí)候，不會在調(diào)用此方法。只有當(dāng)按了左移按鈕時(shí)，才會把righthit重設(shè)為0）
if(righthit==0){
speed2=30;
document.getElementById("demo2").innerHTML=document.getElementById("demo1").innerHTML
function Marquee_a(){
if(document.getElementById("demo").scrollLeft<=0){
document.getElementById("demo").scrollLeft=document.getElementById("demo2").offsetWidth
}
else{
document.getElementById("demo").scrollLeft--
}
}
MyMar3=setInterval(Marquee_a,speed2)
document.getElementById("demo").onmouseover=function()
{clearInterval(MyMar3);document.getElementById("demo_a").onmouseover()}
document.getElementById("demo").onmouseout=function()
{MyMar3=setInterval(Marquee_a,speed2);clearInterval(MyMar4);MyMar4=setInterval(Marquee_b,speed2)}
document.getElementById("demo_c").innerHTML=document.getElementById("demo_b").innerHTML
function Marquee_b(){
if(document.getElementById("demo_a").scrollLeft<=0){
document.getElementById("demo_a").scrollLeft=document.getElementById("demo_c").offsetWidth
}
else{
document.getElementById("demo_a").scrollLeft--
}
}
MyMar4=setInterval(Marquee_b,speed2)
document.getElementById("demo_a").onmouseover=function()
{clearInterval(MyMar4);clearInterval(MyMar3)}
document.getElementById("demo_a").onmouseout=function()
{MyMar4=setInterval(Marquee_b,speed2);document.getElementById("demo").onmouseout()}
righthit=1 //設(shè)置右移按鈕，當(dāng)按了一次右移按鈕后(不管按多少次)，在沒按左移按鈕之前，toright方法里的的代碼不會再被執(zhí)行
lefthit=0 //把左移按鈕設(shè)為0,這樣當(dāng)下次點(diǎn)了左移按鈕的時(shí)候，以便toleft方法被調(diào)用
}
}
</script>
</body>
</html>
以上就是小編為大家?guī)淼腏S圖片左右無縫隙滾動的實(shí)現(xiàn)(兼容IE,Firefox 遵循W3C標(biāo)準(zhǔn))的全部內(nèi)容了，希望對大家有所幫助，多多支持腳本之家~
您可能感興趣的文章:
- 常用JS圖片滾動（無縫、平滑、上下左右滾動）代碼大全(推薦)
- JS實(shí)現(xiàn)的相冊圖片左右滾動完整實(shí)例
- javascript實(shí)現(xiàn)圖片左右滾動效果【可自動滾動，有左右按鈕】
- js實(shí)現(xiàn)鼠標(biāo)左右移動，圖片也跟著移動效果
- 帶左右箭頭圖片輪播的JS代碼
- 圖片的左右移動，js動畫效果實(shí)現(xiàn)代碼
- js鼠標(biāo)點(diǎn)擊按鈕切換圖片-圖片自動切換-點(diǎn)擊左右按鈕切換特效代碼
- js實(shí)現(xiàn)點(diǎn)擊左右按鈕輪播圖片效果實(shí)例
- js實(shí)現(xiàn)圖片點(diǎn)擊左右輪播
- js實(shí)現(xiàn)圖片左右滾動效果
相關(guān)文章
JavaScript實(shí)現(xiàn)移動端輪播效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)移動端輪播效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
bootstrap中的導(dǎo)航條實(shí)例代碼詳解
本文通過實(shí)例代碼給大家介紹了bootstrap中的導(dǎo)航條，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05
JS簡單實(shí)現(xiàn)文件上傳實(shí)例代碼（無需插件）
注意一下：在chrome瀏覽器下，為了數(shù)據(jù)安全，隱藏的input：file不能trigger “click” 事件。 所以要設(shè)置input：file的透明度達(dá)到隱藏的效果2013-11-11
echarts餅圖扇區(qū)添加點(diǎn)擊事件的實(shí)例
下面小編就為大家?guī)硪黄猠charts餅圖扇區(qū)添加點(diǎn)擊事件的實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10
淺析JavaScript的幾種Math函數(shù),random(),ceil(),round(),floor()
本文主要對JavaScript的幾種Math函數(shù),random(),ceil(),round(),floor()的作用進(jìn)行簡要解析，具有很好的參考價(jià)值，需要的朋友一起來看下吧2016-12-12
用正則表達(dá)式 動態(tài)創(chuàng)建/增加css style script 兼容IE firefox
動態(tài)創(chuàng)建/增加css style script 用正則表達(dá)式 兼容IE firefox2009-03-03
這篇文章主要介紹了微信小程序左滑動顯示菜單功能的實(shí)現(xiàn),代碼簡單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-06-06
JavaScript實(shí)現(xiàn)簡單動態(tài)表格
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡單動態(tài)表格，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
《JavaScript DOM 編程藝術(shù)》讀書筆記之DOM基礎(chǔ)
這篇文章主要介紹了《JavaScript DOM 編程藝術(shù)》讀書筆記之DOM基礎(chǔ),需要的朋友可以參考下2015-01-01
JavaScript檢查數(shù)據(jù)中是否存在相同的元素（兩種方法）
這篇文章主要介紹了JavaScript檢查數(shù)據(jù)中是否存在相同的元素（兩種方法）,需要的朋友可以參考下2018-10-10