網頁設計圖片滾動特效_網頁設計圖片滾動代碼

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

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

2、誰會網頁設計？幫忙增加一個圖片自動滾動效果，謝謝

你好，圖片自動滾動效果屬於JS范疇，這個效果開源的程序很多，可以在百度中搜索，如果找到的程序不會調試，那你可以到想立成科技網找技術咨詢。

3、網頁製作圖片滾動

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

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

網頁圖片無縫滾動實現代碼：
<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>

5、用DW做網頁設計，就是那種圖片在循環滾動，點擊就可以進入，這種效果如何做

最簡單可以用<marquee></marquee>標簽、只是不是無縫滾動、可以把加超鏈接的圖片放進這個標簽就可以、

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

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

打開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」網頁文件，最終效果如果所示：

7、網頁中製作文字與圖片滾動效果

裡面的table自己改
我給你貼代碼

<div id=demo style="overflow:hidden; width:213px; height:100px;"> <div id=demo1>
<table width="336" border="0" cellpadding="0" cellspacing="0">
<%set rs=server.CreateObject("adodb.recordset")
sql="select top 10 * from news where lm2_id=146 order by id desc"
rs.open sql,conn,1,1
if rs.eof and rs.bof then
response.Write("<tr><td>無記錄</td></tr>")
else
for i=1 to rs.recordcount%>

<tr>
<td><a href="liang.asp?id=<%=rs("id")%>&lm=<%=Server.URLEncode("重要企業展台")%>"><%=left(rs("subject"),33)%></a>...</td>

</tr>

<%rs.movenext
next
end if%></table></div>
<div id=demo2></div>
</div> <script language="javascript">
var speed=30 // 值越大速度越慢
demo2.innerHTML=demo1.innerHTML
function Marquee(){

if(demo2.offsetTop-demo.scrollTop<=0)
demo.scrollTop-=demo1.offsetHeight
else{
demo.scrollTop++
}

//上下左右無間隙滾動最主要是 if 語句的代碼修改
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>