網頁設計圖片滾動_如何在網頁製作中將圖片設置為滾動

1、網頁製作圖片滾動

<marquee direction=up height=75 onMouseOut=this.start() onMouseOver=this.stop() scrollamount=1 scrolldelay=100 width="180" id=MARQUEE1>滾動內容</marquee>

Direction 參數可設置:up down left right (控制滾動方向)

Scrolldelay = 100 (100就是速度，值越大滾動越快……)

onMouseOut=this.start() ........滑鼠移出狀態滾動

onMouseOver=this.stop() .........滑鼠經過時停止滾動

基本語法
<marquee> ... </marquee>
移動屬性的設置 ,這種移動不僅僅局限於文字，也可以應用於圖片，表格等等

方向
<direction=#> #=left, right ,up ,down <marquee direction=left>從右向左移！</marquee>

方式
<bihavior=#> #=scroll, slide, alternate <marquee behavior=scroll>一圈一圈繞著走！</marquee>
<marquee behavior=slide>只走一次就歇了！</marquee>
<marquee behavior=alternate>來回走</marquee>

循環
<loop=#> #=次數；若未指定則循環不止(infinite) <marquee loop=3 width=50% behavior=scroll>只走 3 趟</marquee> <P>
<marquee loop=3 width=50% behavior=slide>只走 3 趟</marquee>
<marquee loop=3 width=50% behavior=alternate>只走 3 趟！</marquee>

速度
<scrollamount=#> <marquee scrollamount=20>啦啦啦，我走得好快喲！</marquee>

延時
<scrolldelay=#> <marquee scrolldelay=500 scrollamount=100>啦啦啦，我走一步，停一停！</marquee>

外觀(Layout)設置

對齊方式(Align)
<align=#> #=top, middle, bottom <font size=6>
<marquee align=# width=400>啦啦啦，我會移動耶！</marquee>
</font>

底色
<bgcolor=#> #=rrggbb 16 進制數碼，或者是下列預定義色彩：
Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,
Fuchsia, White, Green, Purple, Silver, Yellow, Aqua <marquee bgcolor=aaaaee>顏色！</marquee>

面積
<height=# width=#> <marquee height=40 width=50% bgcolor=aaeeaa>面積！</marquee>

空白
(Margins)<hspace=# vspace=#>
<marquee hspace=20 vspace=20 width=150 bgcolor=ffaaaa align=middle>面積！</marquee>

2、Dreamweaver製作圖片左右滾動的完整代碼怎麼編寫?

使用這個代碼就可以了，而且可以稍微修改下的。

<marquee>標簽是滾動字幕標簽，裡面可以嵌套很多標簽，比如<p>標簽、<a>標簽、<img>標簽，我給你的這個代碼就是嵌套<img>標簽的應用左右滾動可以

以下是這個標簽的參數：

(1)scrollAmount：它表示速度，值越大速度越快。如果沒有它，默認為6，建議設為1～3比較好。

(2)width和height：表示滾動區域的大小，width是寬度，height是高度。特別是在做垂直滾動的時候，一定要設height的值。

(3)direction：表示滾動的方向，默認為從右向左(left)：可選的值有right、down、up。

3、網頁設計圖片滾動代碼

素材的准備。為了更好的表現網站的風格和特色，具備一些更富表現力和吸引力的圖片是必不可少的。同理，准備了一些與網頁主題密切相關的圖片，用於做為實現圖片滾動效果的素材。

打開Dreamweaver8，新建一網頁文件，並保存為名為「index.html"文件。

切換至代碼編輯界面，輸入如下代碼：

對應效果如圖所示：

新建一CSS樣式表文件，並將該文件保存到與「index.html」相同的目錄下，文件名稱為「MyStyle.css"。

在新建的樣式表文件"MyStyle.css」文件中輸入如下代碼：
* { padding:0; margin:0;} /*設置所有對像的內邊距為0*/
body { text-align:center;} /*設置頁面居中對齊*/
#photo-list {
/* 6張圖片的寬度（包含寬度、padding、border、圖片間的留白）
計算：6*(100+2*2+1*2+9) - 9
之所以減去9是第6張圖片的右邊留白 */
width:681px;

/* 圖片的寬度（包含高度、padding、border）
計算：100+2*2+1*2 */
height:106px;
margin:50px auto;
overflow:hidden; /*溢出部份將被隱藏*/
border:1px dashed #ccc;
}
#photo-list ul { list-style:none;}
#photo-list li { float:left; padding-right:9px;}

#photo-list img { border:1px solid #ddd; background:#fff; padding:2px;}

對應文件內容如圖所示：

在網頁文件"index.html"中添加對該樣式表的引用：

此時網頁效果如圖所示：

新建一個JS文件，並將該文件另存為「MoveEffect.js"。

在」MoveEffect.js「文件中輸入如下所示代碼：
var id = function(el) { return document.getElementById(el); },
c = id('photo-list');
if(c) {
var ul = id('scroll'),
lis = ul.getElementsByTagName('li'),
itemCount = lis.length,
width = lis[0].offsetWidth, //獲得每個img容器的寬度
marquee = function() {
c.scrollLeft += 2;
if(c.scrollLeft % width <= 1){ //當 c.scrollLeft 和 width 相等時，把第一個img追加到最後面
ul.appendChild(ul.getElementsByTagName('li')[0]);
c.scrollLeft = 0;
};
},
speed = 50; //數值越大越慢
ul.style.width = width*itemCount + 'px'; //載入完後設置容器長度
var timer = setInterval(marquee, speed);
c.onmouseover = function() {
clearInterval(timer);
};
c.onmouseout = function() {
timer = setInterval(marquee, speed);
};
};

然後在主頁文件"index.html」中添加對該「MoveEffect.js」文件的引用。

代碼如圖所示：

打開「index.html」網頁文件，最終效果如果所示：

4、如何在網頁製作中將圖片設置為滾動

1、素材的准備。為了更好的表現網站的風格和特色，具備一些更富表現力和吸引力的圖片是必不可少的；

2、在電腦上找到並且打開Dreamweaver8，重新建立一個網頁文件，並且把網頁文件保存，且命名為「index.html"文件；

3、在完成網頁文件保存和命名為「index.html"文件以後，切換至代碼編輯界面，輸入相應的程序代碼；

4、新建一CSS樣式表文件，並將該文件保存到與「index.html」相同的目錄下，文件名稱為「MyStyle.css"；

5、在樣式表文件"MyStyle.css」文件的完成以後，打開樣式表文件"MyStyle.css」文件輸入相應的程序代碼；

6、在網頁文件"index.html"中添加對該樣式表的引用：「<link rel="stylesheet" type="text/css" href="MyStyle.css">」，同時新建一個JS文件，並將該文件另存為「MoveEffect.js"；

7、在JS文件」MoveEffect.js「文件建立完成以後，同樣打開JS文件」MoveEffect.js「文件輸入程序的代碼；

8、完成上述程序運行以後，在主頁文件"index.html」中添加對該「MoveEffect.js」文件的引用，「<script type="text/javascript" src="MoveEffect.js"></script>」，打開「index.html」網頁文件即可。

5、如何在HTML頁面中實現圖片循環滾動

<DIV id=demo style="OVERFLOW: hidden; WIDTH: 600px; HEIGHT: 190px; top:485px; left:252px;position: absolute;">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" id=demo1>


<table width="600" border="0" align="center" cellpadding="0" cellspacing="0" >
<tr>
<td width="200" align="center" style="height: 151px">
<a href="WebDeSign.aspx">
<img src="images/indexpic1.gif" width="194" height="147" border="0" /></a>
</td>
<td width="200" align="center" style="height: 151px">
<a href="SoftWare.aspx">
<img src="images/indexpic2.gif" width="194" height="147" border="0" /></a>
</td>
<td align="center" style="height: 151px; width: 200px;">
<a href="VhostIndex.aspx">
<img src="images/indexpic3.gif" width="194" height="147" border="0" /></a>
</td>
</tr>
</table>

</td>
<TD id=demo2 width=1></TD>
</tr>
</table>
</DIV>

<SCRIPT>
var speed=30//速度數值越大速度越慢
var demo2 = document.getElementById("demo2");
var demo = document.getElementById("demo");
var demo1 = document.getElementById("demo1");
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>

自己站的效果

你可以訪問 http://b1.gd.cn

希望對你有幫助。。(*^__^*)

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

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

2.插入如下代碼，如圖：

<%
set rs3=server.CreateObject("ADODB.RecordSet")
rs3.Source ="select top " & top_img & " * from "& db_News_Table &" where picnews=1 and checkked=1 and picname<>'null' order by NewsID DESC"
rs3.Open rs3.Source,conn,3,3
if not rs3.EOF Then
%>
<div align='center' id='demo' style='overflow:hidden;height:125px;width:990px;'>
<table align='center' cellpadding='0' cellspace='0' border='0'>
<tr>
<td id='demo1' valign='top'>
<table width='100%' cellpadding='0' cellspacing='0' border='0' align='center'>
<tr valign='top'>
<%
while not rs3.EOF
fileExt=lcase(getFileExtName(rs3("picname")))
%>
<td align='center'>
<TABLE width=100% border=0 align=center cellPadding=0 cellSpacing=0>
<TR>
<TD width=8 rowspan=3 > </TD>
<TD vAlign=top width=8><img src='Images/bg_0ltop.gif' width=10 height=10></TD>
<TD background=images/bg_01.gif></TD>
<TD vAlign=top width=7><img src='Images/bg_0rtop.gif' width=10 height=10></TD>
<TD width=7 rowspan=3 vAlign=top> </TD>
</TR>
<TR>
<TD background='Images/bg_03.gif'> </TD>
<TD align="center" bgcolor="#E9E9E9">
<%if fileext="jpg" or fileext="bmp" or fileext="png" or fileext="gif" then%>
<table style="TABLE-LAYOUT: fixed" height=80 cellSpacing=0 cellPadding=0 width=105 border=0>
<tr>
<td style="HEIGHT: 80px">
<a class=middle href='ReadNews.asp?NewsID=<%=rs3("NewsID")%>' target=_blank title='<%=rs3("title")%>'><img src='<%=FileUploadPath & rs3("picname")%>' width='105' border=0></a>
</td>
</tr>
</table>
<%else if fileext="swf" then%>
<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0' width='105' height='80'>
<param name=movie value='<%=FileUploadPath & rs3("picname")%>'>
<param name=quality value=high>
<param name='Play' value='-1'>
<param name='Loop' value='0'>
<param name='Menu' value='-1'>
<param name='wmode' value='transparent'>
<embed src='<%=FileUploadPath & rs3("picname")%>' width='105' height='80' pluginspage='http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash' type='application/x-shockwave-flash'></embed>
</object>
<a class=middle href='ReadNews.asp?NewsID=<%=rs3("NewsID")%>' target=_blank title='<%=rs3("title")%>'></a>
<%
end if
end If
%>
</TD>
<TD background='Images/bg_04.gif'> </TD>
</TR>
<TR>
<TD><img src='Images/bg_0lbottom.gif' width=10 height=10></TD>
<TD><img src='Images/bg_02.gif'></TD>
<TD><img src='Images/bg_0rbottom.gif' width=10 height=10></TD>
</TR>
<TR>
<TD> </TD>
<TD colspan=3 align=center height=20 valign='top' background='Images/bg_05.gif'>
<a class=middle href='ReadNews.asp?NewsID=<%=rs3("NewsID")%>' target=_blank title='<%=rs3("title")%>'><%=CutStr(htmlencode4(rs3("title")),14)%></a>
</TD>
<TD> </TD>
</TR>
</TABLE>
</td>
<%
rs3.MoveNext
wend
%>
</tr>
</table>
</td>
<td id=demo2 valign=top></td>
</tr>
</table>
</div>
<%if top_img >4 then%>
<script>
var speed=15
demo2.innerHTML=demo1.innerHTML
function Marquee1(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar1=setInterval(Marquee1,speed)
demo.onmouseover=function() {clearInterval(MyMar1)}
demo.onmouseout=function() {MyMar1=setInterval(Marquee1,speed)}
</script>
<%
end if
else
Response.Write "暫無最新圖文"
end if
rs3.close
set rs3=nothing
%>

3.編寫完成代碼後查看預覽效果圖，如下：

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

7、網頁中的滾動圖片的代碼怎麼寫？

網頁中的滾動圖片的代碼有上下左右四個方向，分別是：

<head>

<----->

</head>

<body>

<！--向上滾動代碼開始-->

</div>

</div>

var speed=30;

var colee2=document.getElementById("colee2");

var colee1=document.getElementById("colee1");

var colee=document.getElementById("colee");

colee2.innerHTML=colee1.innerHTML; //克隆colee1為colee2

function Marquee1(){

//當滾動至colee1與colee2交界時

if(colee2.offsetTop-colee.scrollTop<=0){

colee.scrollTop-=colee1.offsetHeight; //colee跳到最頂端

}else{

colee.scrollTop++

}

var MyMar1=setInterval(Marquee1,speed)//設置定時器

//滑鼠移上時清除定時器達到滾動停止的目的

colee.onmouseover=function() {clearInterval(MyMar1)}

//滑鼠移開時重設定時器

colee.onmouseout=function(){MyMar1=setInterval(Marquee1,speed)}

</script>

</div>

</div>

var speed=30

var colee_bottom2=document.getElementById("colee_bottom2");

var colee_bottom1=document.getElementById("colee_bottom1");

var colee_bottom=document.getElementById("colee_bottom");

colee_bottom2.innerHTML=colee_bottom1.innerHTML

colee_bottom.scrollTop=colee_bottom.scrollHeight

function Marquee2(){

if(colee_bottom1.offsetTop-colee_bottom.scrollTop>=0)

colee_bottom.scrollTop+=colee_bottom2.offsetHeight

else{

colee_bottom.scrollTop--

}

var MyMar2=setInterval(Marquee2,speed)

colee_bottom.onmouseover=function() {clearInterval(MyMar2)}

colee_bottom.onmouseout=function() {MyMar2=setInterval(Marquee2,speed)}

</script>

</tr>

</table>

</td>

</tr>

</table>

</div>

//使用div時，請保證colee_left2與colee_left1是在同一行上.

var speed=30//速度數值越大速度越慢

var colee_left2=document.getElementById("colee_left2");

var colee_left1=document.getElementById("colee_left1");

var colee_left=document.getElementById("colee_left");

colee_left2.innerHTML=colee_left1.innerHTML

function Marquee3(){

if(colee_left2.offsetWidth-colee_left.scrollLeft<=0)//offsetWidth 是對象的可見寬度

colee_left.scrollLeft-=colee_left1.offsetWidth//scrollWidth 是對象的實際內容的寬，不包邊線寬度

else{

colee_left.scrollLeft++

}

var MyMar3=setInterval(Marquee3,speed)

colee_left.onmouseover=function() {clearInterval(MyMar3)}

colee_left.onmouseout=function() {MyMar3=setInterval(Marquee3,speed)}

</script>

</tr>

</table>

</td>

</tr>

</table>

</div>

var speed=30//速度數值越大速度越慢

var colee_right2=document.getElementById("colee_right2");

var colee_right1=document.getElementById("colee_right1");

var colee_right=document.getElementById("colee_right");

colee_right2.innerHTML=colee_right1.innerHTML

function Marquee4(){

if(colee_right.scrollLeft<=0)

colee_right.scrollLeft+=colee_right2.offsetWidth

else{

colee_right.scrollLeft--

}

var MyMar4=setInterval(Marquee4,speed)

colee_right.onmouseover=function() {clearInterval(MyMar4)}

colee_right.onmouseout=function() {MyMar4=setInterval(Marquee4,speed)}

</script>

(7)網頁設計圖片滾動擴展資料：

代碼就是程序員用開發工具所支持的語言寫出來的源文件，是一組由字元、符號或信號碼元以離散形式表示信息的明確的規則體系。代碼設計的原則包括唯一確定性、標准化和通用性、可擴充性與穩定性、便於識別與記憶、力求短小與格式統一以及容易修改等。源代碼是代碼的分支，某種意義上來說，源代碼相當於代碼。

現代程序語言中，源代碼可以書籍或磁帶形式出現，但最為常用格式是文本文件，這種典型格式的目的是為了編譯出計算機程序。計算機源代碼最終目的是將人類可讀文本翻譯成為計算機可執行的二進制指令，這種過程叫編譯，它由通過編譯器完成。

源代碼（也稱源程序），是指一系列人類可讀的計算機語言指令。

源代碼是相對目標代碼和可執行代碼而言的。源代碼就是用匯編語言和高級語言寫出來的地代碼。目標代碼是指源代碼經過編譯程序產生的能被cpu直接識別二進制代碼。可執行代碼就是將目標代碼連接後形成的可執行文件，當然也是二進制的。

在現代程序語言中，源代碼可以是以書籍或者磁帶的形式出現，但最為常用的格式是文本文件，這種典型格式的目的是為了編譯出計算機程序。計算機源代碼的最終目的是將人類可讀的文本翻譯成為計算機可以執行的二進制指令，這種過程叫做編譯，通過編譯器完成。

參考資料：網路-計算機代碼

8、網頁製作怎樣讓圖片滾動？

網頁圖片無縫滾動實現代碼：
<style type="text/css">

</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>

</script></td>
</tr>
</table>

9、網頁設計中如何設置滾動圖片（循環滾動）

你這個問題回答起來要表述的太多。其實你可以上網搜網頁特效代碼，查圖片無縫滾動效果。然後直接修改成自己的。至6張，你前面不是定義了4張嗎

10、網頁上怎麼製作滾動的圖片

網站循環滾動圖片需要js代碼製作
第一步，可以去相關的js特效網站下載一個你所需要的代碼
第二步，用DW修改路徑改為你自己網站的路徑
第三步，把你所做的圖片上傳到空間
第四步，添加代碼路徑及調用js文件網站保存

導航:首頁 > 萬維百科 > 網頁設計圖片滾動

網頁設計圖片滾動

與網頁設計圖片滾動相關的知識