簡單的圖片滾動代碼

『壹』 JavaScript代碼實現圖片循環滾動效果

1.概述
循環滾動圖片，不僅可以增添Web頁面的動態效果，而且可以節省頁面空間，有效地保證在有限的頁面中顯示更多的圖片。
2.技術要點
主要應用setTimeout()方法實現圖片的循環滾動效果。setTimeout()方法的語法格式如下：
setTimeout（function,milliseconds,[arguments]）
參數說明：
a.
function：要調用的JavaScript自定義函數名稱。
b.
Milliseconds：設置超時時間（以毫秒為單位）。
功能：經過超時時間後，調用函數。此值可以用clearTimeout()函數清除。
3.具體實現
（1）在頁面的合適位置添加一個id屬性為demo的<div>標記，並在該標記中添加表格及要要滾動顯示的圖片。關鍵代碼如下：
<div
id="demo"
style="
overflow:
hidden;
width:
455px;
height:
166px;">
<table
border="0"
cellspacing="0"
cellpadding="0">
<tr>
<td
valign="top"
id="marquePic1">
<!--
要循環滾動的圖片
-->
<table
width="455"
border="0"
align="center"
cellpadding="0"
cellspacing="0"
>
<tr
align="center">
<%for(int
i=1;i<8;i++){%>
<td>
<img
src="Images/<%=i%>.jpg"
width="118"
height="166"
border="1">
</td>
<%}%>
</tr>
</table>
</td>
<td
id="marquePic2"
width="1"></td>
</tr>
</table>
</div>
（2）編寫自定義的JavaScript函數move()，用於實現無間斷的圖片循環滾動效果。speed數值越大圖片滾動的越快，具體代碼如下：
<script
language="javascript">
var
speed=30
;
//設置間隔時間
marquePic2.innerHTML=marquePic1.innerHTML;
var
demo=document.getElementById("demo");
//獲取demo對象
function
Marquee(n){
//實現圖片循環滾動的方法
if(marquePic1.offsetWidth-demo.scrollLeft<=0){
demo.scrollLeft=0;
}
else{
demo.scrollLeft=demo.scrollLeft+n;
}
}
var
MyMar=setInterval("Marquee(5)",speed);
demo.onmouseover=function()
{
//停止滾動
clearInterval(MyMar);
}
demo.onmouseout=function()
{
//繼續滾動
MyMar=setInterval("Marquee(5)",speed);
}
</script>
以上所述是小編給大家介紹的JavaScript代碼實現圖片循環滾動效果的相關知識，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

『貳』 圖片上下滾動代碼

簡單的話MARQUEE就可以了，如要別效果，用JS寫一個，網上現成的也很多
如：
<marquee
loop="10"
direction="down"
ONMOUSEOUT=this.start()
ONMOUSEOVER=this.stop()
>
<img
src="01.jpg">
<img
src="02.jpg">
</marquee>

『叄』 網頁製作-圖片從左向右滾動代碼

非常簡單!!
<MARQUEE
direction=right
>
<IMG
src="http://圖片地址">
</MARQUEE>
如果你想多放幾張圖片，可以在<MARQUEE></MARQUEE>之間插入<IMG
src="http://圖片地址">
圖片滾動效果是非常簡單的~~還可以在這段代碼里豐富你的指定

『肆』 高分急求圖片滾動代碼

圖片滾動代碼如下:
<div id=demo style=overflow:hidden;height:139;width:232;background:#f4f4f4;color:#ffffff><table align=left cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top><img src="http://www.makewing.com/lanren/jscode/js-0063/images/01.jpg"><img src="http://www.makewing.com/lanren/jscode/js-0063/images/02.jpg"><img src="http://www.makewing.com/lanren/jscode/js-0063/images/03.jpg"><img src="http://www.makewing.com/lanren/jscode/js-0063/images/04.jpg"><img src="http://www.makewing.com/lanren/jscode/js-0063/images/05.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.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>

把src="http://www.makewing.com/lanren/jscode/js-0063/images/04.jpg"><img 這里路徑改成你自已圖像存放的路徑就可以了.

若想加個超鏈接的話,只要加個代碼就可以了.
我舉個例子,<a href="超鏈接路徑"><img src="圖像路徑"></a>

『伍』 圖片上加滾動文字代碼

在圖片上添加上下滾動文字的源代碼：
<DIV><TABLE
style="WIDTH:
500px;
HEIGHT:
375px"
width=500
border=0><TBODY><TR><TD
background=圖片地址
height=375><P><MARQUEE
style="WIDTH:
500px;
HEIGHT:
375px"
scrollAmount=1
scrollDelay=50
direction=up
width=500
height=375>圖片上的文字</MARQUEE></P></TD></TR></TBODY>
代碼說明：
1，width=寬度
height=高度
的數值為圖片顯示的大小比例，必須根據圖片實際大小調整；如圖片尺寸為1024：768的，其代碼中的寬度和高度，也必須變更為1024：768；圖片尺寸為500：375的，其代碼中的寬度和高度，就必須變更為500：375，否則顯示出來的畫面不完整；而且代碼里四組寬，高數值變更要統一；
2，scrollAmount=1
為字速，數值越大字的運行速度越快；
3，border=0>
為邊框數值，0為無邊框；填上數字就變為有邊框，而且數字的大小，就是邊框的寬窄度；
4，direction=up
為字的行走方向
up=上
down=下
；
如要調整為左右方向的話
left=左
right=右
那字體就會從圖片頂端成單行通過；
5，滾動文字行與行之間不要有空行；
具體操作方法如下：
第一步：先要找到做文章背景圖片的圖片網路地址，否則文章做了一半才去找圖片地址就麻煩了；
第二步：進入發表文章窗口；
第三步：勾選「顯示源代碼」（至關重要!）；
第四步：在編輯欄內原有代碼後面添加上列代碼（代碼里應先加好圖片地址和你需要加入的文字）；
第五步：取消「顯示源代碼」的選擇，你就會在編輯欄里看到圖片和文字效果了；
第六步：最後，點擊發表文章就OK了；
最後還有一條，如果你不想讓文字滾動的話，那就只須按以上方法操作到第四步時，把你准備好的文章（包括已處理好字的大小，字體，顏色），直接復制到圖片上，點擊發表文章即可；當然，代碼里「圖片上的文字」這幾個字應預先去掉；
歡迎光臨我的博客：http://blog.sina.com.cn/m/azeng

『陸』 讓圖片從右到左滾動的網頁代碼是怎麼樣的

往左是：
<marquee><img
src="你的圖片地址"></marquee>
往右是：
<marquee
direction=right><img
src="你的圖片地址"></marquee>
往上是：
<marquee
direction=up><img
src="你的圖片地址"></marquee>
往下是：
<marquee
direction=down><img
src="你的圖片地址"></marquee>
如果需要在當滑鼠移動到圖片上時停止滾動，就在<marquee>里加onmouseover=stop()
onmouseout=start()，
例如<marquee
direction=down
onmouseover=stop()
onmouseout=start()><img
src="你的圖片地址"></marquee>

『柒』 html圖片滾動代碼

<!--下面是向上滾動代碼-->

<div id=butong_net_top
style=overflow:hidden;height:100;width:90;>
<div id=butong_net_top1>
<img src="插入需要滾動的圖片">
<img src="插入需要滾動的圖片">
<img src="插入需要滾動的圖片">
<img src="插入需要滾動的圖片">
<img src="插入需要滾動的圖片">
</div>
<div
id=butong_net_top2></div>
</div>
<script>
var speed=30
butong_net_top2.innerHTML=butong_net_top1.innerHTML
//克隆butong_net_top1為butong_net_top2
function Marquee1(){
//當滾動至butong_net_top1與butong_net_top2交界時
if(butong_net_top2.offsetTop-butong_net_top.scrollTop<=0)&<60;&<60;
butong_net_top.scrollTop-=butong_net_top1.offsetHeight
//butong_net_top跳到最頂端
else{
butong_net_top.scrollTop++;
}
}
var MyMar1=setInterval(Marquee1,speed)//設置定時器
//滑鼠移上時清除定時器達到滾動停止的目的
butong_net_top.onmouseover=function() {clearInterval(MyMar1)}
//滑鼠移開時重設定時器
butong_net_top.onmouseout=function(){MyMar1=setInterval(Marquee1,speed)}
</script>

<!--向上滾動代碼結束-->

<br>

<!--下面是向下滾動代碼-->

<div id=butong_net_bottom
style=overflow:hidden;height:100;width:90;>
<div id=butong_net_bottom1>
<img src="插入需要滾動的圖片">
<img src="插入需要滾動的圖片">
<img src="插入需要滾動的圖片">
<img src="插入需要滾動的圖片">
<img src="插入需要滾動的圖片">
</div>
<div
id=butong_net_bottom2></div>
</div>
<script>
var speed=30
butong_net_bottom2.innerHTML=butong_net_bottom1.innerHTML
butong_net_bottom.scrollTop=butong_net_bottom.scrollHeight
function Marquee2(){
if(butong_net_bottom1.offsetTop-butong_net_bottom.scrollTop>=0)
butong_net_bottom.scrollTop+=butong_net_bottom2.offsetHeight
else{
butong_net_bottom.scrollTop--
}
}
var MyMar2=setInterval(Marquee2,speed)
butong_net_bottom.onmouseover=function()
{clearInterval(MyMar2)}
butong_net_bottom.onmouseout=function()
{MyMar2=setInterval(Marquee2,speed)}
</script>

<!--向下滾動代碼結束-->

<br>

<!--下面是向左滾動代碼-->

<div id="butong_net_left"
style="overflow:hidden;width:500px;">
<table cellpadding="0" cellspacing="0"
border="0">
<tr><td
id="butong_net_left1" valign="top"
align="center">
<table cellpadding="2" cellspacing="0"
border="0">
<tr align="center">
<td><img
src="<img
src="插入需要滾動的圖片"></td>
<td><img
src="插入需要滾動的圖片"></td>
<td><img
src="插入需要滾動的圖片"></td>
<td><img
src="插入需要滾動的圖片"></td>
<td><img
src="插入需要滾動的圖片"></td>
</tr>
</table>
</td>
<td id="butong_net_left2"
valign="top"></td>
</tr>
</table>
</div>
<script>
var speed=30//速度數值越大速度越慢
butong_net_left2.innerHTML=butong_net_left1.innerHTML
function Marquee3(){
if(butong_net_left2.offsetWidth-butong_net_left.scrollLeft<=0)
butong_net_left.scrollLeft-=butong_net_left1.offsetWidth
else{
butong_net_left.scrollLeft++
}
}
var MyMar3=setInterval(Marquee3,speed)
butong_net_left.onmouseover=function()
{clearInterval(MyMar3)}
butong_net_left.onmouseout=function()
{MyMar3=setInterval(Marquee3,speed)}
</script>

<!--向左滾動代碼結束-->

<br>

<!--下面是向右滾動代碼-->

<div id="butong_net_right"
style="overflow:hidden;width:500px;">
<table cellpadding="0" cellspacing="0"
border="0">
<tr><td
id="butong_net_right1" valign="top"
align="center">
<table cellpadding="2" cellspacing="0"
border="0">
<tr align="center">
<td><img
src="插入需要滾動的圖片"></td>
<td><img
src="插入需要滾動的圖片"></td>
<td><img
src="插入需要滾動的圖片"></td>
<td><img
src="插入需要滾動的圖片"></td>
<td><img
src="插入需要滾動的圖片"></td>
</tr>
</table>
</td>
<td id="butong_net_right2"
valign="top"></td>
</tr>
</table>
</div>
<script>
var speed=30//速度數值越大速度越慢
butong_net_right2.innerHTML=butong_net_right1.innerHTML
function Marquee4(){
if(butong_net_right.scrollLeft<=0)
butong_net_right.scrollLeft+=butong_net_right2.offsetWidth
else{
butong_net_right.scrollLeft--
}
}
var MyMar4=setInterval(Marquee4,speed)
butong_net_right.onmouseover=function()
{clearInterval(MyMar4)}
butong_net_right.onmouseout=function()
{MyMar4=setInterval(Marquee4,speed)}
</script>

<!--向右滾動代碼結束-->

『捌』 圖片滾動代碼

圖片滾動代碼

<MARQUEE width=500 height=95 onmouseover=stop() onmouseout=start() scrollAmount=3 loop=infinite deplay="0"><IMG src="pic/logo.gif"><IMG src="images/aiving.gif"></MARQUEE>

1.圖片尺寸為原始大小
2. scrollAmount 它表示速度，值越大速度越快。
3. width 是滾動區域的寬度，height 滾動區域的高度。
4. 加入onmouseover=stop() onmouseout=start()代碼，滑鼠指向循環文字圖片時他們會停止滾動，滑鼠離開時繼續滾動。
5.用<a href=>和</a>把<img>包圍可以給滾動圖片加上超級鏈接，並且img必須設border=0，否則圖片會出現邊框。
6.滾動方向可參見本專題「文字滾動代碼」。

--------
請求加分給我

『玖』 圖片滾動效果代碼

<div id="Demo_t0" style="overflow:hidden;width:930;height:160;">
<table width=" 0" height="136" border=0 align=center cellpadding=0 cellspacing="0" cellspace=0>
<tr>
<td align="center" valign=top id=Demo_t1><table width=" 0" height="136" border=0 align=left cellpadding=0 cellspacing="0" cellspace=0>
<tr>
<td width=" 0" align="center" valign="middle">滾動內容</td>
</tr>
</table></td>
<td width="1" valign=top id=Demo_t2></td>
</tr>
</table>
</div>
<script language="javascript">
var Demo_speed=30
Demo_t2.innerHTML=Demo_t1.innerHTML
function Demo_Marquee(){
if(Demo_t2.offsetWidth-Demo_t0.scrollLeft<=0)
Demo_t0.scrollLeft-=Demo_t1.offsetWidth
else{
Demo_t0.scrollLeft++
}
}
var Demo_MyMar=setInterval(Demo_Marquee,Demo_speed)
Demo_t0.onmouseover=function() {clearInterval(Demo_MyMar)}
Demo_t0.onmouseout=function() {Demo_MyMar=setInterval(Demo_Marquee,Demo_speed)}
</script>

肯定能有 我做網站時就是用的這個代碼

width:930;height:160 兩個數值是滾動范圍的寬和長

然後可以將圖片的路徑代碼直接替換 上面代碼中「滾動內容」就可以了

『拾』 誰有簡單的圖片滾動無縫代碼越簡單越好，而且要有簡要說明的！

<Marquee behavior="alternate" height="50" direction="left" scrollamount="3" scrolldelay="30" width="100%">
<img src="1.jpg"><img src="2.jpg">
</Marquee>

BEHAVIOR：可以在頁面上一旦出現文本時讓瀏覽器按照設定的方法來處理文本。如果設定的方法是SLIDE，那麼文本就移動到文檔上，並停留在頁邊距上。如果設定為AlterNATE，則文本從一邊移動到另一邊。如果設定為SCROLL，文本將在頁面上反復滾動。本屬性不是必須使用的

direction:方向

scrollamount:速度

scrolldelay:廷時