網頁圖片如何循環滾動

Ⅰ 製作網頁中的滾動圖片，怎樣循環播放。

1.打開Dreamweaver創建新頁面，如圖：

注意事項:代碼中select top " & top_img & " * from "& db_News_Table &" where picnews=1 and checkked=1 and picname<>'null' order by NewsID DESC"根據網站的資料庫路徑來定義數據表，包括ID編號的降序和順序。

Ⅱ 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標簽，雖然可以實現圖片滾動，但只有當全部圖片滾動1次後，第2次滾動才開始，這樣就不連續了，有沒有辦法讓圖片滾動連續起來？也就是說讓兩次滾動的圖片首尾相接不間斷。望高手賜教！用js也行。

解析:

只能用JS,

<!-簡便型logo圖片橫向滾動代碼-><br><br>

<script language="JavaScript1.2">

<!--

var sliderwidth=550

var sliderheight=31

var slidespeed=4

var leftrightslide=new Array()

var finalslide=''

leftrightslide[0]='<a href="nknucc.nknu.e/~s1378/wjs-4"><img src=nknucc.nknu.e/~s1378/logo030.gif border=1></a>'

leftrightslide[1]='<a href="nknucc.nknu.e/~s1378/wjs-13"><img src=nknucc.nknu.e/~s1378/logo032.gif border=1></a>'

leftrightslide[2]='<a href="nknucc.nknu.e/~s1378/wjs-27000"><img src=nknucc.nknu.e/~s1378/logo034.gif border=1></a>'

leftrightslide[3]='<a href="nknucc.nknu.e/~s1378/wjs-11-gfm"><img src=nknucc.nknu.e/~s1378/logo031.gif border=1></a>'

var speed=slidespeed

for (i=0;i<leftrightslide.length;i++)

finalslide=finalslide+leftrightslide+" "

if (document.all){

document.write('<marquee id="ieslider" scrollAmount=0 class="page_speeder_1619037892">'+finalslide+'</marquee>')

ieslider.onmouseover=new Function("ieslider.scrollAmount=0")

ieslider.onmouseout=new Funct ion("if (document.readyState=='plete') ieslider.scrollAmount=slidespeed")

}

function regenerate(){

window.location.reload()

}

function regenerate112(){

if (documentyers){

document.ns_slider01.visibility="show"

setTimeout("window.onresize=regenerate",450)

intializeleftrightslide()

}

if (document.all)

ieslider.scrollAmount=slidespeed

}

function intializeleftrightslide(){

document.ns_slider01.document.ns_slider02.document.write('<nobr>'+finalslide+'</nobr>')

document. ns_slider01.document.ns_slider02.document.close()

thelength=document.ns_slider01.document.ns_slider02.document.width

scrollslide()

}

function scrollslide(){

if (document.ns_slider01.document.ns_slider02.left>=thelength*(-1)){

document.ns_slider01.document.ns_slider02.left-=slidespeed

setTimeout("scrollslide()",100)

}

else{

document.ns_slider01.document.ns_slider02.left=sliderwidth

scrollslide()

}

}

window.onload=regenerate112

-->

</script>

<ilayer width=&{sliderwidth}; height=&{sliderheight}; name=ns_slider01 visibility=hide>

<layer name=ns_slider02 onMouseover="slidespeed=0;" onMouseout="slidespeed=speed">

</layer>

</ilayer>

還有一個方法晚些時候告訴你,更簡單的.我正在測試!

Ⅳ html怎麼設置滾動圖片

方案一：直接使用HTML的滾動標簽 marquee ，把圖片放入滾滾標簽內部，代碼如下：

<marquee>

<img src='1.jpg'>

<img src='2.jpg'>

<img src='3.jpg'>

<img src='4.jpg'>

</marquee>

方案二：使用第三方插件，比如swiper.js，

插件

Ⅳ 網頁製作圖片滾動

<marqueedirection=upheight=75onMouseOut=this.start()onMouseOver=this.stop()scrollamount=1scrolldelay=100width="180"id=MARQUEE1>滾動內容</marquee>
Direction參數可設置:updownleftright(控制滾動方向)
Scrolldelay=100(100就是速度，值越大滾動越快……)
onMouseOut=this.start()........滑鼠移出狀態滾動
onMouseOver=this.stop().........滑鼠經過時停止滾動
基本語法
<marquee>...</marquee>
移動屬性的設置,這種移動不僅僅局限於文字，也可以應用於圖片，表格等等
方向
<direction=#>#=left,right,up,down<marqueedirection=left>從右向左移！</marquee>
方式
<bihavior=#>#=scroll,slide,alternate<marqueebehavior=scroll>一圈一圈繞著走！</marquee>
<marqueebehavior=slide>只走一次就歇了！</marquee>
<marqueebehavior=alternate>來回走</marquee>
循環
<loop=#>#=次數；若未指定則循環不止(infinite)<marqueeloop=3width=50%behavior=scroll>只走3趟</marquee><P>
<marqueeloop=3width=50%behavior=slide>只走3趟</marquee>
<marqueeloop=3width=50%behavior=alternate>只走3趟！</marquee>
速度
<scrollamount=#><marqueescrollamount=20>啦啦啦，我走得好快喲！</marquee>
延時
<scrolldelay=#><marqueescrolldelay=500scrollamount=100>啦啦啦，我走一步，停一停！</marquee>
外觀(Layout)設置
對齊方式(Align)
<align=#>#=top,middle,bottom<fontsize=6>
<marqueealign=#width=400>啦啦啦，我會移動耶！</marquee>
</font>
底色
<bgcolor=#>#=rrggbb16進制數碼，或者是下列預定義色彩：
Black,Olive,Teal,Red,Blue,Maroon,Navy,Gray,Lime,
Fuchsia,White,Green,Purple,Silver,Yellow,Aqua<marqueebgcolor=aaaaee>顏色！</marquee>
面積
<height=#width=#><marqueeheight=40width=50%bgcolor=aaeeaa>面積！</marquee>
空白
(Margins)<hspace=#vspace=#>
<marqueehspace=20vspace=20width=150bgcolor=ffaaaaalign=middle>面積！</marquee>