如何實現無縫滾動

① JavaScript裡面怎麼讓圖片實現無縫橫向滾動效果！！！

先了解一下對象的幾個的屬性： innerHTML:設置或獲取位於對象起始和結束標簽內的 HTML scrollHeight: 獲取對象的滾動高度。 scrollLeft:設置或獲取位於對象左邊界和窗口中目前可見內容的最左端之間的距離 scrollTop:設置或獲取位於對象最頂端和窗口中可見內容的最頂端之間的距離 scrollWidth:獲取對象的滾動寬度 offsetHeight:獲取對象相對於版面或由父坐標 offsetParent 屬性指定的父坐標的高度 offsetLeft:獲取對象相對於版面或由 offsetParent 屬性指定的父坐標的計算左側位置 offsetTop:獲取對象相對於版面或由 offsetTop 屬性指定的父坐標的計算頂端位置 offsetWidth:獲取對象相對於版面或由父坐標 offsetParent 屬性指定的父坐標的寬度 圖片上無縫滾動 <style type="text/css"> <!-- #demo { background: #FFF; overflow:hidden; border: 1px dashed #CCC; height: 100px; text-align: center; float: left; } #demo img { border: 3px solid #F2F2F2; display: block; } --> </style> 向上滾動 <div id="demo"> <div id="demo1"> <a href="#"><img src=" http://www.fu80.com/other/link/Clear_logo.gif" border="0" /></a> <a href="#"><img src=" http://www.fu80.com/other/link/Clear_logo.gif" border="0" /></a> <a href="#"><img src=" http://www.fu80.com/other/link/Clear_logo.gif" border="0" /></a> <a href="#"><img src=" http://www.fu80.com/other/link/Clear_logo.gif" border="0" /></a> <a href="#"><img src=" http://www.fu80.com/other/link/Clear_logo.gif" border="0" /></a> </div> <div id="demo2"></div> </div> <script> <!-- var speed=10; //數字越大速度越慢 var tab=document.getElementById("demo"); var tab1=document.getElementById("demo1"); var tab2=document.getElementById("demo2"); tab2.innerHTML=tab1.innerHTML; //克隆demo1為demo2 function Marquee(){ if(tab2.offsetTop-tab.scrollTop<=0)//當滾動至demo1與demo2交界時 tab.scrollTop-=tab1.offsetHeight //demo跳到最頂端 else{ tab.scrollTop++ } } var MyMar=setInterval(Marquee,speed); tab.onmouseover=function() {clearInterval(MyMar)};//滑鼠移上時清除定時器達到滾動停止的目的 tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//滑鼠移開時重設定時器 --> </script> 圖片下無縫滾動 <style type="text/css"> <!-- #demo { background: #FFF; overflow:hidden; border: 1px dashed #CCC; height: 100px; text-align: center; float: left; } #demo img { border: 3px solid #F2F2F2; display: block; } --> </style> 向下滾動 <div id="demo"> <div id="demo1"> <a href="#"><img src=" http://www.fu80.com/other/link/Clear_logo.gif" border="0" /></a> <a href="#"><img src=" http://www.fu80.com/other/link/Clear_logo.gif" border="0" /></a> <a href="#"><img src=" http://www.fu80.com/other/link/Clear_logo.gif" border="0" /></a> <a href="#"><img src=" http://www.fu80.com/other/link/Clear_logo.gif" border="0" /></a> <a href="#"><img src=" http://www.fu80.com/other/link/Clear_logo.gif" border="0" /></a> </div> <div id="demo2"></div> </div> <script> <!-- 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(tab1.offsetTop-tab.scrollTop>=0)//當滾動至demo1與demo2交界時 tab.scrollTop+=tab2.offsetHeight //demo跳到最頂端 else{ tab.scrollTop-- } } var MyMar=setInterval(Marquee,speed); tab.onmouseover=function() {clearInterval(MyMar)};//滑鼠移上時清除定時器達到滾動停止的目的 tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//滑鼠移開時重設定時器 --> </script> 圖片左無縫滾動 <style type="text/css"> <!-- #demo { background: #FFF; overflow:hidden; border: 1px dashed #CCC; width: 500px; } #demo img { border: 3px solid #F2F2F2; } #indemo { float: left; width: 800%; } #demo1 { float: left; } #demo2 { float: left; } --> </style> 向左滾動 <div id="demo"> <div id="indemo"> <div id="demo1"> <a href="#"><img src=" http://www.fu80.com/other/link/Clear_logo.gif" border="0" /></a> <a href="#"><img src=" http://www.fu80.com/other/link/Clear_logo.gif" border="0" /></a> <a href="#"><img src=" http://www.fu80.com/other/link/Clear_logo.gif" border="0" /></a> <a href="#"><img src=" http://www.fu80.com/other/link/Clear_logo.gif" border="0" /></a> <a href="#"><img src=" http://www.fu80.com/other/link/Clear_logo.gif" border="0" /></a> <a href="#"><img src=" http://www.fu80.com/other/link/Clear_logo.gif" border="0" /></a> </div> <div id="demo2"></div> </div> </div> <script> <!-- var speed=10; //數字越大速度越慢 var tab=document.getElementById("demo"); var tab1=document.getElementById("demo1"); var tab2=document.getElementById("demo2"); tab2.innerHTML=tab1.innerHTML; function Marquee(){ if(tab2.offsetWidth-tab.scrollLeft<=0) tab.scrollLeft-=tab1.offsetWidth else{ tab.scrollLeft++; } } var MyMar=setInterval(Marquee,speed); tab.onmouseover=function() {clearInterval(MyMar)}; tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)}; --> </script> 圖片右無縫滾動 <style type="text/css"> <!-- #demo { background: #FFF; overflow:hidden; border: 1px dashed #CCC; width: 500px; } #demo img { border: 3px solid #F2F2F2; } #indemo { float: left; width: 800%; } #demo1 { float: left; } #demo2 { float: left; } --> </style> 向右滾動 <div id="demo"> <div id="indemo"> <div id="demo1"> <a href="#"><img src=" http://www.fu80.com/other/link/Clear_logo.gif" border="0" /></a> <a href="#"><img src=" http://www.fu80.com/other/link/Clear_logo.gif" border="0" /></a> <a href="#"><img src=" http://www.fu80.com/other/link/Clear_logo.gif" border="0" /></a> <a href="#"><img src=" http://www.fu80.com/other/link/Clear_logo.gif" border="0" /></a> <a href="#"><img src=" http://www.fu80.com/other/link/Clear_logo.gif" border="0" /></a> <a href="#"><img src=" http://www.fu80.com/other/link/Clear_logo.gif" border="0" /></a> </div> <div id="demo2"></div> </div> </div> <script> <!-- var speed=10; //數字越大速度越慢 var tab=document.getElementById("demo"); var tab1=document.getElementById("demo1"); var tab2=document.getElementById("demo2"); tab2.innerHTML=tab1.innerHTML; function Marquee(){ if(tab.scrollLeft<=0) tab.scrollLeft+=tab2.offsetWidth else{ tab.scrollLeft-- } } var MyMar=setInterval(Marquee,speed); tab.onmouseover=function() {clearInterval(MyMar)}; tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)}; --> </script>

② 【HTML】如何實現無縫循環的圖片滾動效果

網站中，有時為了更好的利用有限的頁面空間展示更多的內容，也為了豐富網站頁面自身的表現樣式，我們往往會用到圖片滾動的效果。想要實現這種效果，只需要在想要顯示的表格或網頁中加入以下代碼即可實現： <div id=demo style="overflow:hidden;height:100px;width:300px;"><table align=left cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top> <img height="150" alt="" width="200" src="/lazysite/user_space/7788/CIMG0056_縮小大小.JPG" /> <img height="150" alt="" width="200" src="/lazysite/user_space/7788/CIMG0053_縮小大小.JPG" /> <img height="150" alt="" width="200" src="/lazysite/user_space/7788/CIMG0054_縮小大小.JPG" /> <img height="150" alt="" width="200" src="/lazysite/user_space/7788/CIMG0058_縮小大小.JPG" /> <img height="200" alt="" width="150" src="/lazysite/user_space/7788/CIMG0059_縮小大小.JPG" /> <img height="150" alt="" width="200" src="/lazysite/user_space/7788/CIMG0063_縮小大小.JPG" /> <img height="150" alt="" width="200" src="/lazysite/user_space/7788/CIMG0070_縮小大小.JPG" /> <img height="150" alt="" width="200" src="/lazysite/user_space/7788/CIMG0071_縮小大小.JPG" /> <img height="150" alt="" width="200" src="/lazysite/user_space/7788/CIMG0072_縮小大小.JPG" /> //這個圖片的地址可以是相對的也可以是絕對的 </td><td id=demo2 valign=top></td></tr></table></div><script>var speed=30 demo2.innerHTML=demo1.innerHTML function Marquee(){ if(demo2.offsetWidth-demo.scrollLeft<=0) demo.scrollLeft-=demo1.offsetWidthelse{demo.scrollLeft++}}var MyMar=setInterval(Marquee,speed) demo.onmouseover=function() {clearInterval(MyMar)} demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}</script>下面，我們就上面代碼的主要部分進行分析： <div id=demo style="overflow:hidden;height:100px;width:300px;"> 這段代碼中下劃線的部分表示我們這段滾動圖片所佔用區域的大小。用戶可根據頁面的實際需要進行調節。但一般情況下至少要大於或等於圖片的高度和寬度。 <img height="150" alt="" width="200" src="/lazysite/user_space/7788/CIMG0056_縮小大小.JPG" /> 上面這段代碼是圖片的代碼。每加入一行如上代碼，那就會多出一個展示的圖片。圖片可以是一個，也可以是無數個。需要強調的是，每個圖片的高度和寬度應盡量的統一大小，主要顯示出來的效果才會更好看。 var speed=30 這行代碼是控制圖片滾動的速度。數字越小，滾動的也就越快；相反，數字越大，滾動的也就越慢。

③ 在淘寶網上如何實現無縫滾動

<table height="161" cellspacing="0" cellpadding="0" width="773" border="0">
<tbody>
<tr>
<td width="773">
<p><marquee style="relative: " scrollamount="1" behavior="alternate" width="740" height="123"><img height="123" width="123" border="0" alt="" src="圖片地址1" /><img height="123" width="123" border="0" alt="" src="圖片地址2" /><img height="123" width="123" border="0" alt="" src="圖片地址3" /><img height="123" width="123" border="0" alt="" src="圖片地址4" />
<img height="123" width="123" border="0" alt="" src="圖片地址5" /><img height="123" width="123" border="0" alt="" src="圖片地址6" />
<img height="123" width="123" border="0" alt="" src="圖片地址7" /> <img height="123" width="123" border="0" alt="" src="圖片地址8" /><img height="123" width="123" border="0" alt="" src="圖片地址9" /></marquee></p>
</td>
</tr>
</tbody>
</table>

④ html圖片無縫滾動怎麼實現

直接給你一段簡單的代碼，不懂再問
<html>
<head>
<title>圖片滾動 </title>
<style>
#div1
{position:relative;width:650px;height:210px;overflow:hidden;
}
#div2{position:absolute;}
li{float:left;list-style-type:none;padding:5px;}
img{border:none;}
#div2 li a:hover{top:-10px;}
a{position:relative;}
</style>
<script>
window.onload=function()
{
var odiv2=document.getElementById('div2');
var ali=odiv2.getElementsByTagName('li');
var aspeed=-5;
var timer=null;
odiv2.innerHTML+=odiv2.innerHTML;
odiv2.style.width=ali[0].offsetWidth*ali.length+'px';
odiv2.onmouseover=function(){clearInterval(timer);};
function a()
{
timer=setInterval(function()
{
odiv2.style.left=odiv2.offsetLeft+aspeed+'px';
if (odiv2.offsetLeft<-odiv2.offsetWidth/2)
{
odiv2.style.left='0px';
}
},30);};
odiv2.onmouseout=a;
a();
}
</script>
</head>
<body>
<div id='div1'>
<div id='div2'>
<li><a href=""><img src="1.jpg" /></a></li>
<li><a href=""><img src="2.jpg" /></a></li>
<li><a href=""><img src="3.jpg" /></a></li>
<li><a href=""><img src="4.jpg" /></a></li>
</div>
</div>
</body>
</html>

⑤ HTML 無縫文字滾動怎麼做

上下無縫滾動代碼：
<div id="demo" style="height:50px;overflow:hidden;">
<div id="indemo" style="height:200%;">
<div id="demo1">
第一行字<br />
第二行字
</div>
<div id="demo2"></div>
</div>
</div>
</body>
<script type="text/javascript">
speed = 100; //數字越大滾得越慢
var tab = document.getElementById("demo");
var tab1 = document.getElementById("demo1");
var tab2 = document.getElementById("demo2");
tab2.innerHTML = tab1.innerHTML;
tab.scrollTop = tab1.offsetHeight;
function Marquee(){
if (tab.scrollTop >= tab1.offsetHeight) {
tab.scrollTop-=tab2.offsetHeight;
}else{
tab.scrollTop+=1;
}
}
var MyMar=setInterval(Marquee,speed);
</script>

左右橫向無縫滾動代碼

<table cellSpacing=0 cellPadding=0 width=100 align=center border=0>
<tr>
<td width=190 bgColor=#d6f6fd height=27></td>
<td bgColor=#d6f6fd height=27>
<marquee onmouseover=this.stop() onmouseout=this.start() scrollAmount=2 scrollDelay=60 width=580 height=20>
<a class="#" href="#" onclick="javascript:window.open('', 'newwindow')" title="\">橫向滾動的廣告效果 [ 7/13/2012]
<a class="#" href="#" onclick="javascript:window.open('', 'newwindow')" title="\">橫向滾動的廣告效果2 [ 7/13/2012]
<a class="#" href="#" onclick="javascript:window.open('', 'newwindow')" title="\">橫向滾動的廣告效果3 [ 7/10/2012]
</marquee>
</td>
</tr>
</table>

⑥ 怎麼實現marquee標簽的向上無縫滾動

<html>
<head>
<title>TODOsupplyatitle</title>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width">
</head>
<body>
<style>
#marqueep{height:30px;line-height:30px;margin:0}
</style>
<divstyle="height:30px;overflow:hidden;">
<divid='marquee'>
<p>第1段</p>
<p>第2段</p>
<p>第3段</p>
<p>第4段</p>
<p>第5段</p>
</div>
</div>

<script>
(function(){
varmarquee=document.getElementById('marquee');
varoffset=0;
varscrollheight=marquee.offsetHeight;
varfirstNode=marquee.children[0].cloneNode(true);
marquee.appendChild(firstNode);//還有這里
setInterval(function(){
if(offset==scrollheight){
offset=0;
}
marquee.style.marginTop="-"+offset+"px";
offset+=1;
},50);
})();
</script>
</body></html>

<divid="demo"style="overflow:hidden;height:168px;width:300px;">

<divid="demo1">

<!--此處放要顯示的內容-->

</div>

<divid="demo2"></div>

</div>

<scriptlanguage="javascript">

varspeed=30;

vardemo2=document.getElementByIdx_x("demo2");

vardemo1=document.getElementByIdx_x("demo1");

vardemo=document.getElementByIdx_x("demo");

demo2.innerHTML=demo1.innerHTML;

functionMarquee(){

if(demo2.offsetTop-demo.scrollTop<=0){

demo.scrollTop-=demo1.offsetHeight;

}

else{

demo.scrollTop++;

}

}

varMyMar=setInterval(Marquee,speed);

demo.onmouseover=function(){clearInterval(MyMar)};

demo.onmouseout=function(){MyMar=setInterval(Marquee,speed)};

</script>

——【仙】墨紙

⑦ css怎麼實現文字無縫上下滾動

155156157158159!DOCTYPEhtmlheadmetahttp-equiv="Content-Type"content="text/html;charset=gb2312"/title向上下左右不間斷無縫滾動效果(兼容火狐和IE)/title/headbodydivid="colee"style="overflow:hidden;height:253px;width:410px;"divid="colee1"p此處放文字。。。。。。。。。/pp此處放文字。。。。。。。。。/pp此處放文字。。。。。。。。。/pp此處放文字。。。。。。。。。/pp此處放文字。。。。。。。。。/pp此處放文字。。。。。。。。。/pp此處放文字。。。。。。。。。/pp此處放文字。。。。。。。。。/pp此處放文字。。。。。。。。。/pp此處放文字。。。。。。。。。/pp此處放文字。。。。。。。。。/pp此處放文字。。。。。。。。。/p/divdivid="colee2"/div/divscriptvarspeed=30;varcolee2=document.getElementById("colee2");varcolee1=document.getElementById("colee1");varcolee=document.getElementById("colee");colee2.innerHTML=colee1.innerHTML;//克隆colee1為colee2functionMarquee1(){//當滾動至colee1與colee2交界時if(colee2.offsetTop-colee.scrollTop=0){colee.scrollTop-=colee1.offsetHeight;//colee跳到最頂端}else{colee.scrollTop++}}varMyMar1=setInterval(Marquee1,speed)//設置定時器//滑鼠移上時清除定時器達到滾動停止的目的colee.onmouseover=function(){clearInterval(MyMar1)}//滑鼠移開時重設定時器colee.onmouseout=function(){MyMar1=setInterval(Marquee1,speed)}/script!--向上滾動代碼結束--!--下面是向下滾動代碼--divid="colee_bottom"style="overflow:hidden;height:253px;width:410px;"divid="colee_bottom1"pimgsrc="/jscss/demoimg/200907/bg3.jpg"/ppimgsrc="/jscss/demoimg/200907/bg3.jpg"/ppimgsrc="/jscss/demoimg/200907/bg3.jpg"/ppimgsrc="/jscss/demoimg/200907/bg3.jpg"/ppimgsrc="/jscss/demoimg/200907/bg3.jpg"/ppimgsrc="/jscss/demoimg/200907/bg3.jpg"/ppimgsrc="/jscss/demoimg/200907/bg3.jpg"/ppimgsrc="/jscss/demoimg/200907/bg3.jpg"/ppimgsrc="/jscss/demoimg/200907/bg3.jpg"/p/divdivid="colee_bottom2"/div/divscriptvarspeed=30varcolee_bottom2=document.getElementById("colee_bottom2");varcolee_bottom1=document.getElementById("colee_bottom1");varcolee_bottom=document.getElementById("colee_bottom");colee_bottom2.innerHTML=colee_bottom1.innerHTMLcolee_bottom.scrollTop=colee_bottom.scrollHeightfunctionMarquee2(){if(colee_bottom1.offsetTop-colee_bottom.scrollTop=0)colee_bottom.scrollTop+=colee_bottom2.offsetHeightelse{colee_bottom.scrollTop--}}varMyMar2=setInterval(Marquee2,speed)colee_bottom.onmouseover=function(){clearInterval(MyMar2)}colee_bottom.onmouseout=function(){MyMar2=setInterval(Marquee2,speed)}/script!--向下滾動代碼結束--!--下面是向左滾動代碼--divid="colee_left"style="overflow:hidden;width:500px;"tablecellpadding="0"cellspacing="0"border="0"trtdid="colee_left1"valign="top"align="center"tablecellpadding="2"cellspacing="0"border="0"tralign="center"tdpimgsrc="/jscss/demoimg/200907/bg3.jpg"/p/tdtdpimgsrc="/jscss/demoimg/200907/bg3.jpg"/p/tdtdpimgsrc="/jscss/demoimg/200907/bg3.jpg"/p/tdtdpimgsrc="/jscss/demoimg/200907/bg3.jpg"/p/tdtdpimgsrc="/jscss/demoimg/200907/bg3.jpg"/p/tdtdpimgsrc="/jscss/demoimg/200907/bg3.jpg"/p/tdtdpimgsrc="/jscss/demoimg/200907/bg3.jpg"/p/td/tr/table/tdtdid="colee_left2"valign="top"/td/tr/table/divscript//使用div時，請保證colee_left2與colee_left1是在同一行上.varspeed=30//速度數值越大速度越慢varcolee_left2=document.getElementById("colee_left2");varcolee_left1=document.getElementById("colee_left1");varcolee_left=document.getElementById("colee_left");colee_left2.innerHTML=colee_left1.innerHTMLfunctionMarquee3(){if(colee_left2.offsetWidth-colee_left.scrollLeft=0)//offsetWidth是對象的可見寬度colee_left.scrollLeft-=colee_left1.offsetWidth//scrollWidth是對象的實際內容的寬，不包邊線寬度else{colee_left.scrollLeft++}}varMyMar3=setInterval(Marquee3,speed)colee_left.onmouseover=function(){clearInterval(MyMar3)}colee_left.onmouseout=function(){MyMar3=setInterval(Marquee3,speed)}/script!--向左滾動代碼結束--!--下面是向右滾動代碼--divid="colee_right"style="overflow:hidden;width:500px;"tablecellpadding="0"cellspacing="0"border="0"trtdid="colee_right1"valign="top"align="center"tablecellpadding="2"cellspacing="0"border="0"tralign="center"tdpimgsrc="/jscss/demoimg/200907/bg3.jpg"/p/tdtdpimgsrc="/jscss/demoimg/200907/bg3.jpg"/p/tdtdpimgsrc="/jscss/demoimg/200907/bg3.jpg"/p/tdtdpimgsrc="/jscss/demoimg/200907/bg3.jpg"/p/tdtdpimgsrc="/jscss/demoimg/200907/bg3.jpg"/p/td/tr/table/tdtdid="colee_right2"valign="top"/td/tr/table/divscriptvarspeed=30//速度數值越大速度越慢varcolee_right2=document.getElementById("colee_right2");varcolee_right1=document.getElementById("colee_right1");varcolee_right=document.getElementById("colee_right");colee_right2.innerHTML=colee_right1.innerHTMLfunctionMarquee4(){if(colee_right.scrollLeft=0)colee_right.scrollLeft+=colee_right2.offsetWidthelse{colee_right.scrollLeft--}}varMyMar4=setInterval(Marquee4,speed)colee_right.onmouseover=function(){clearInterval(MyMar4)}colee_right.onmouseout=function(){MyMar4=setInterval(Marquee4,speed)}/script!--向右滾動代碼結束--/body/html常用JS圖片、文字滾動（...大小：1.41K 已經過網路安全檢測,放心下載點擊下載

追問

這是JS的代碼？我要的HTML的

⑧ html中怎麼實現無縫滾動

給你個例子吧，我這里運行很好，你根據你的需要進行適當的調整應該就可以用的。祝福你！
<div id="demo" style="overflow:hidden;height:141px;width:164px; text-align:left;" onmouseover="clearInterval(MyMar2);" onmouseout="MyMar2=setInterval(Marquee2,speed2);">
<div id="demo1">
<div align="left">滾動內容 <br><br>
</div><br><br>
</div>
<div id="demo2"></div>
</div>

<script>
var speed2=30;
demo2.innerHTML=demo1.innerHTML
function Marquee2()
{
if(demo2.offsetTop-demo.scrollTop<=0)
demo.scrollTop-=demo1.offsetHeight;
else
demo.scrollTop++;
}
var MyMar2=setInterval(Marquee2,speed2);
</script>
</div>

⑨ 3秒滾動一次，且無縫循環滾動，用css3怎麼實現

如果你只想使用css3來實現輪播，你就只有通過定位來控制每張圖片的位置，使用animate動畫來實現輪播