A. DW圖片無縫滾動,放了三張圖,但是只有一張一直重復滾動
1、使用marquee標簽。
2、使用方法:
<marquee><img src="你的圖片地址" /></marquee>
B. 【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 這行代碼是控制圖片滾動的速度。數字越小,滾動的也就越快;相反,數字越大,滾動的也就越慢。
C. 網頁製作怎樣讓圖片滾動
網頁圖片無縫滾動實現代碼:
<style type="text/css">
<!--
ul,li,div{margin:0; padding:0; font-size:12px;}
#demo {
width:678px; float:right; overflow:hidden;height:144px; border:none;
}
#indemo {
float: left;
width: 800%;
}
#demo1,#demo2{height:144px;float:left; display:inline-table;}
#demo1 li,#demo2 li{ width:127px; height:144px; float:left; padding-left:8px; }
#demo1 li img,#demo2 li img{ display:block; background:#ccc; padding:1px; border:1px solid #ccc;}
#demo1 li span,#demo2 li span{ width:127px; height:30px; line-height:30px; text-align:center; overflow:hidden;}
#demo1 {
float: left;
}
#demo2 {
float: left;
}
-->
</style>
<div id="demo">
<div id="indemo">
<div id="demo1">
<ul>
<li><a href="#"><img src="http://boaer.comimg/temp01.gif" width="123" height="110" /></a><span><a href="#">產品名稱</a></span></li>
<li><a href="#"><img src="http://boaer.comimg/temp02.gif" width="123" height="110" /></a><span><a href="#">產品名稱</a></span></li>
<li><a href="#"><img src="http://boaer.comimg/temp03.gif" height="110" /></a><span><a href="#">產品名稱</a></span></li>
</ul></div><div id="圖片展示代碼例子"></div></div></div><script>
<!--
var speed=20; //數字越大速度越慢
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></td>
</tr>
</table>
D. js圖片無縫滾動只滾動一次就停止了這個問題請教一下,怎麼辦
無縫滾動通常採用一個源版塊,一個復製版塊,兩塊並排合成一個版主體,在一個較小權范圍的母版塊里並排滾動。
假設向上滾動那麼
js每隔幾十毫秒設置主體頭部減一
js判斷當版塊2的頭部減母版塊的頭部小於等於零時就設置版塊主體頭部等零,這樣就實現了一個循環
如果你的判斷有誤或者錯誤賦值或者這個主體總長還沒有母版塊長就會失靈。
E. js圖片無縫滾動的原理是什麼
以垂直滾動為例:一組圖片
控制它的滾動條進行滾動
且此時對這組圖片進行專復制並添加進屬原圖片組中,現在就有兩組圖片了。你可以想像一下,現在滾動條繼續滾動,原來那組圖片最後一張圖片已經滾至頂端且消失,復制的那組圖片的第一張跟在原圖最後一張圖片後出現,此時你就能感覺到無縫滾動了,而就在此刻我們將滾動條高度設置為0(因為速度很快,所以不會出現停頓感),你感覺圖片就這樣一直不停的滾動下去了。關鍵點在於元素的復制、添加,以及滾動條距離的獲取和修改。網上代碼很多,都是基於這類構思
F. 在PPT2003中如何實現無限從左到右循環的滾動圖片效果
提前來指定哪張停下的話是可以自實現的
結果不確定的話那就沒辦法
如果你是用來抽取隨機結果的話ppt做不到
ppt的所有效果都是線性的,有因必有果
不過如果你只是想在演示的時候效果更炫目
其實預定結果也無妨
預定結果的話就是很簡單的效果了,無非是滾一番一點出結果,
設一個循環動作單擊結束接個對象出現效果就可以
完全可以先抽獎,把ppt只當作宣布的方式而已。
就像電視鑒寶里那個滾動的估價示數器,
結果是專家定的,只是為了好看才一個一個數滾出來。
G. 怎樣在網頁製作中設置圖片左右無縫滾動
網站常用的向左滾動 首尾相接
你可以把圖片銜接的路徑改成你電腦上的就行了.寬度,長度你可以自己改,圖片指向的網頁也可以改。圖片數量也可以加。把下面代碼另存為html格式就可以了。
<div id="demo" style="overflow:hidden;width:600px;color:#ffffff;">
<table cellpadding="0" cellspacing="0" border="0">
<tr><td id="demo1" valign="top" align="center">
<table cellpadding="2" cellspacing="0" border="0">
<tr align="center">
<td><a href="www..com"><img src="01.gif" width="120" height="100" border="0"></a>
<td>
<td><a href="www..com"><img src="02.gif" width="120" height="100" border="0"></a>
<td>
<td><a href="www..com"><img src="03.gif" width="120" height="100" border="0"></a>
<td>
<td><a href="www..com"><img src="04.gif" width="120" height="100" border="0"></a>
<td>
<td><a href="www..com"><img src="05.gif" width="120" height="100" border="0"></a>
<td><td><a href="www..com"><img src="06.gif" width="120" height="100" border="0"></a>
<td>
<td><a href="www..com"><img src="07.gif" width="120" height="100" border="0"></a>
<td>
</tr>
</table>
</td>
<td id="demo2" valign="top"></td>
</tr>
</table>
</div>
<script>
var speed=1
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
H. 圖片無縫 滾動 不用JS 可以實現嗎
可以。假如是自動的橫向滾動就可以
html是靜態的顯示,所以他只能保證顯示的內內容容而不是顯示的動畫所以無法解決動態問題。
css3增加了許多的動畫效果,所以當你期望沒有任何事件進行,圖片在可視界面裡面自動滾動的話,css3是可以實現的。
如果是用滑鼠進行滾動,那麼就必須使用js。
html是內容的靜態展示。
css是樣式的渲染。
js是事件的觸發。