求js實現圖片不間斷滾動代碼,求js實現圖片不間斷滾動代碼的方法

本文目錄一覽：

• 1、js中怎麼實現圖片不間斷的向左滾動效果，要那種代碼清晰的~
• 2、JS無縫滾動圖片的代碼 麻煩大神幫我解釋下每句的含義
• 3、js實現圖片自動的滾動效果
• 4、JS代碼：圖片由下向上不間斷滾動，滾動到第二遍時寫的CSS樣式無效了，求指導！
• 5、求JS圖片滾動代碼

js中怎麼實現圖片不間斷的向左滾動效果，要那種代碼清晰的~

script type=”text/javascript”

var speed = 20;//滾動速度

var maq;

var m1;//第一份滾動的內容

var m2;//第二份滾動的內容

var timer;//定時器

function run(){

if(m1.offsetWidth=maq.scrollLeft){

maq.scrollLeft-=m1.offsetWidth;

}else{

maq.scrollLeft+=6;

}

}

window.onload=function(){

maq=document.getElementById(“maq”);

m1=document.getElementById(“m1”);

m2=document.getElementById(“m2”);

m2.innerHTML=m1.innerHTML;

if(timer==null){

timer=window.setInterval(run,speed);

}

maq.onmouseover=function(){

window.clearInterval(timer);

}

maq.onmouseout=function(){

timer=window.setInterval(run,speed);

}

}

/script

/head

body

div id=”maq” style=”height:200px; width:180px; overflow:hidden”

table

tr

td id=”m1″

table

tr

tdimg src=”” width=”174″ height=”268″ //td

tdimg src=”” width=”174″ height=”268″ //td

tdimg src=”” width=”174″ height=”268″ //td

/tr

/table

/td

td id=”m2″/td

/tr

/table

/div

/body

樓主詳細代碼在這裡這已經是相當的簡介版了你只要把圖片路徑改一下就能用了，~要採納呦~你懂得~~

JS無縫滾動圖片的代碼 麻煩大神幫我解釋下每句的含義

var speed=10; ///圖片左移速度時間毫秒數字越大速度越慢

var tab=document.getElementById(“demo”);

var tab1=document.getElementById(“demo1”);

var tab2=document.getElementById(“demo2”);

tab2.innerHTML=tab1.innerHTML; //克隆demo1為demo2

tab.scrollTop=tab.scrollHeight

function Marquee(){

if(tab2.offsetWidth-tab.scrollLeft=0)// //當demo滾動至demo2的交界處。與就是與demo2重合時。offsetWidth與scrollLeft剛好相等

tab.scrollLeft-=tab1.offsetWidth //demo跳回初始位置

else{

tab.scrollLeft++;//demo開始重新移動

}

}

//setInterval讓MyMar方法每隔多少秒執行一次，並把返回的調用次數ID

var MyMar=setInterval(Marquee,speed);

tab.onmouseover=function() {clearInterval(MyMar)}; //當滑鼠移動demo上面時。調用clearInterval清除MyMar1.這樣圖片便不會在移動了。移到圖片時，第一行和第二行的圖片都會停止

tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};重新setInterval讓方法執行，這樣圖片會繼續移動

js實現圖片自動的滾動效果

自動滾動，主要思路是用js自帶的setInterval方法。

定義和用法

setInterval() 方法可按照指定的周期（以毫秒計）來調用函數或計算表達式。

setInterval() 方法會不停地調用函數，直到 clearInterval() 被調用或窗口被關閉。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的參數。

語法

setInterval(code,millisec[,”lang”])

參數

code    必需。要調用的函數或要執行的代碼串。  

millisec    必須。周期性執行或調用 code 之間的時間間隔，以毫秒計。  

返回值

一個可以傳遞給 Window.clearInterval() 從而取消對 code 的周期性執行的值。

簡單的例子，僅供參考：

style    

*{ margin:0; padding:0; list-style:none;}    

#box{ width:840px; border:1px solid #000; height:210px; margin:30px auto; position:relative; overflow:hidden;}    

#box ul{ position:absolute; left:0; top:0;}    

#box ul li{ width:200px; height:200px; float:left; padding:5px;}    

/style    

script    

window.onload=function(){    

var oBox=document.getElementById(‘box’);    

var oUl=oBox.children[0];    

var aLi=oUl.children;    

//複製一份內容    

oUl.innerHTML+=oUl.innerHTML;    

oUl.style.width=aLi.length*aLi[0].offsetWidth+’px’;    

setInterval(function(){    

var l=oUl.offsetLeft+10;    

if(l=0){    

l=-oUl.offsetWidth/2;    

}    

oUl.style.left=l+’px’;    

},30);    

};    

/script    

/head    

body    

div id=”box”    

ul    

    liimg src=”img/1.jpg” width=”200″/li    

       liimg src=”img/2.jpg” width=”200″/li    

       liimg src=”img/3.jpg” width=”200″/li    

       liimg src=”img/4.jpg” width=”200″/li    

   /ul    

/div    

/body

JS代碼：圖片由下向上不間斷滾動，滾動到第二遍時寫的CSS樣式無效了，求指導！

我的測試結果是這樣的：

demo2.innerHTML=demo1.innerHTML;

//demo1.offsetHeight=783 demo2.offsetHeight=773

//demo2.offsetTop=792 scrollTop=752時停止

function Marquee(){

if(demo2.offsetTop-demo.scrollTop=40)

當它停止的時候，還差40，所以，改成=40　就可以了。

當scrollTop=752時，它是停止，是因為滾動條已經到底了，不能再滾動了，所以停止了。

但是，

demo1.offsetHeight=783

demo2.offsetHeight=773

這兩個數據為什麼不一樣，我就不太理解了。樓主如果知道為什麼的話，麻煩告訴我一下。

（噢，對了，差點忘了，因為樓主原引用的圖片，我這裡無法顯示，於是，我就換了一張圖片，但如果是原圖片的話，上面三個數據也應該會是不一樣的！樓主可以測試一下。）

求JS圖片滾動代碼

使用jquery吧，很容易解決注意要包含jquery.js，網上下載吧，很多的。具體實現如下：

script src=”jquery.js”/script

script

function AutoScroll(obj){

$(obj).find(“ul:first”).animate({

marginTop:”-25px”

},500,function(){

$(this).css().find(“li:first”).appendTo(this);

});

}

$(document).ready(function(){

setInterval(‘AutoScroll(“#scrollDiv”)’,2000);

)};

/script

div id=”scrollDiv”

ul

li滾動內容/li

/ul

/div

如果對您有幫助，請記得採納為滿意答案，謝謝！祝您生活愉快！

vaela