網頁設計多張圖片循環滾動_怎麼實現多張圖片的循環滾動

1、網頁製作中無限循環滾動的圖片代碼

我自己用jquery寫的縱向的，想要橫向的我可以幫你改改。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-

8" />
<title>無標題文檔</title>
<script language="javascript" src="jquery.js"></script>
<script language="javascript">
$(document).ready(function() {
var height = $("ul li").height();
var ul = $("ul");
var picTimer;
var btn = "<div class='scroll_btn pre'></div><div

class='scroll_btn next'></div>";
//$("ul").append(btn);
$("ul").hover(function() {
clearInterval(picTimer);
},function() {
picTimer = setInterval(
function() {
var field = $("ul

li:first");
field.animate

({marginTop:-height+'px'},600,function(){
field.appendTo

(ul).css('marginTop',0);
})
},3000
);
}).trigger("mouseleave");
//下一個需要研究
$(".pre").click(function() {
var field = $("ul li:first");
var lastField = $("ul li:last");
field.animate({marginTop:height

+'px'},600,function(){
lastField.insertBefore(field);
});
});

$(".next").click(function() {
var field = $("ul li:first");
field.animate

({marginTop:-height+'px'},600,function(){
field.appendTo

(ul).css('marginTop',0);
}) ;
});
});
</script>
<style type="text/css">
* { margin:0px; padding:0px;}
ul { width:200px; height:200px; border:1px solid #030;

position:relative; overflow:hidden;}
li { list-style:none; width:200px; height:200px; display:block;}
.scroll_btn { width:100px; height:20px; position:absolute;

background:#000; z-index:100}
.pre { left:10px; top:10px;}
.next { left:10px; bottom:10px;}
</style>
</head>

<body>
<ul>
<li style="background:red"></li>
<li style="background:green"></li>
<li style="background:blue"></li>
<li style="background:yellow"></li>
</ul>
</body>
</html>
記得：<script language="javascript" src="jquery.js"></script>
載入jquery工程才能看效果

2、網頁中 3 張圖片一起循環滾動的代碼

用跑馬燈可以實現這個效果
或者用下面這種方式也可以實現，是從右向左移動的。
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0 align="center" background="images/hunqing_bg.jpg">
<TBODY>
<TR>
<TD> </TD>
<TD height=80><div id=demo
style="OVERFLOW: hidden; WIDTH: 778px; align: center"
align=center>
<table cellspacing=0 cellpadding=0 width="129%"
align=center border=0>
<tbody>
<tr>
<td id=marquePic1 align=middle><table cellspacing=0 cellpadding=0 width=800
align=center border=0>
<tbody>
<tr>
<td height="143"><div align="center"><img src="images/zhengshu-1.jpg" width="158" height="115" alt="" border="0" /><img src="images/zhengshu-2.jpg" width="158" height="115" border="0" /><img src="images/zhengshu-3.jpg" width="158" height="115" border="0" /></div></td>
</tr>
</tbody>
</table></td>
<td id=marquePic2
valign=top></td>
</tr>
</tbody>
</table>
</div></TD>
<SCRIPT language=javascript>
Marquee();
var speed=5
marquePic2.innerHTML=marquePic1.innerHTML
function Marquee(){
if(demo.scrollLeft>=marquePic1.scrollWidth){
demo.scrollLeft=1
}else{
demo.scrollLeft++
}
id1 = setTimeout("Marquee()",speed);
}
demo.onmouseover=function() {clearTimeout(id1)}
demo.onmouseout=function() {id1=setTimeout("Marquee()",speed);}
</SCRIPT>
</TR></TBODY></TABLE>
</td>
</tr>
</table>

3、急求！！！在網頁中怎樣讓幾張連續圖片來回滾動，用HTML什麼代碼？謝了

使用DIV,CSS樣式來做！
一般現在使用3P來實現，如APS.NET！
你可以拷貝一個腳本修改裡面的參數，就可專以達到效果了！

使用屬html代碼，只能使用一個！

就是跑馬燈標簽來實現簡單的效果！

<marquee></marquee>這個標簽！

如：

<marquee direction=left scrollamount=6 onmouseover="this.stop()" onmouseout="this.start()">
這是一段跑動的文字.我經過它就能停下來.</marquee>
<input type=button value=關閉窗口 onclick="window.close()">
<input type=button value=刷新 onclick="history.go(0)">
</body></html>
其中的scrollamount屬性可以改變速度.值小它就會變慢.
height可以改變高度.direction可以改變方向.direction=up就會向上動

我建議你去找一ASP,或者JavaScript的代碼來進行修改參數！

4、在html裡面如何製作不斷循環滾動的圖片

這里有一個無縫上下左右滾動加定高定寬停頓效果
你把文字改成圖片就行
裡面有源碼可以參考

5、我製作的網頁,我想讓多個圖片在一行里滾動,應該怎麼辦?

圖片滾動代碼 (從右向左滾動)

<marquee scrollamount=1 scrolldelay=3 valign=middle behavior="scroll">

<img border="0" src=" http://要滾動的圖內片地址容1">

<img border="0" src=" http://要滾動的圖片地址2">
......

</marquee>

6、網頁上的圖片循環連續滾動如何製作？麻煩告訴操作步驟，代碼不會使用，謝謝

這里有一個無縫上下左右滾動加定高定寬停頓效果
你把文字換圖片就行
參考一下吧

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

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編號的降序和順序。

8、怎麼實現多張圖片的循環滾動?

圖片滾動，實際上就是設置的一段時間之後切換下展示的圖片。附件為完整的例子。

代碼展示：

<!DOCTYPE html>

<head>

<title>圖片切換效果</title>

</head>

<body>

.container{

width:280px;

height:200px;

border:1px solid #eee;

position:relative;

}

#idPicText{

background:#eee;

line-height:25px;

text-align:center;

font-weight:bold;

width:282px;

white-space:nowrap;

overflow:hidden;

font-size:12px;

}

#idPicText a{

text-decoration:none;

color:#333;

display:block;

}

#idPicList img{

cursor:pointer;

width:65px;

height:50px;

filter:alpha(opacity=50);

-moz-opacity: .5;

opacity: .5;

border:0;

margin:10px;

}

#idPicList img.on{

filter:alpha(opacity=100);

-moz-opacity: 1;

opacity: 1;

}

#idNum{ position:absolute; right:5px; bottom:5px;}

#idNum li{

float: left;

list-style:none;

color: #fff;

text-align: center;

line-height: 16px;

width: 16px;

height: 16px;

font-family: Arial;

font-size: 12px;

cursor: pointer;

margin: 1px;

border: 1px solid #707070;

background-color: #060a0b;

}

#idNum li.on{

line-height: 18px;

width: 18px;

height: 18px;

font-size: 14px;

border: 0;

background-color: #ce0609;

font-weight: bold;

}

</style>

</div>

</ul>

</div>

var r = new RevealTrans("idShow");

//添加變換對象

r.Add('http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_rt_1.jpg', '圖片變換效果', 'http://www.cnblogs.com/cloudgamer/archive/2008/05/23/1205642.html');

r.Add('http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_rt_2.jpg', '圖片滑動展示效果', 'http://www.cnblogs.com/cloudgamer/archive/2008/05/13/1194272.html');

r.Add('http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_rt_3.jpg', '圖片切換展示效果', 'http://www.cnblogs.com/cloudgamer/archive/2008/07/06/1236770.html');

r.Start();

//////////////////////

var rvt = new RevealTrans("idPicShow");

//添加變換對象

rvt.Add('http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_rt_1.jpg', '圖片變換效果', 'http://www.cnblogs.com/cloudgamer/archive/2008/05/23/1205642.html');

rvt.Add('http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_rt_2.jpg', '圖片滑動展示效果', 'http://www.cnblogs.com/cloudgamer/archive/2008/05/13/1194272.html');

rvt.Add('http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_rt_3.jpg', '圖片切換展示效果', 'http://www.cnblogs.com/cloudgamer/archive/2008/07/06/1236770.html');

var oList = $("idPicList"), oText = $("idPicText"), arrImg = [];

var oNum = $("idNum"), arrNum = [];

//設置圖片列表

Each(rvt.List, function(list, i){

//圖片式

var img = document.createElement("img");

img.src = list["img"]; img.alt = list["text"];

arrImg[i] = img;

oList.appendChild(img);

//按鈕式

var li = document.createElement("li");

li.innerHTML = i + 1;

arrNum[i] = li;

oNum.appendChild(li);

//事件設置

img.onmouseover = li.onmouseover = function(){ rvt.Auto = false; rvt.Index = i; rvt.Start(); };

img.onmouseout = li.onmouseout = function(){ rvt.Auto = true; rvt.Start(); };

});

//設置圖片列表樣式文本顯示區域

rvt.onShow = function(){

var i = this.Index, list = this.List[i];

//圖片式

Each(arrImg, function(o){ o.className = ""; }); arrImg[i].className = "on";

//按鈕式

Each(arrNum, function(o){ o.className = ""; }); arrNum[i].className = "on";

//文本區域

oText.innerHTML = !!list.url ? "<a href='" + list.url + "' target='_blank'>" + list.text + "</a>" : list.text;

}

//文本顯示區域

oText.onmouseover = function(){ rvt.Auto = false; rvt.Stop(); };

oText.onmouseout = function(){ rvt.Auto = true; rvt.Start(); };

rvt.Start();

</script>

<br />

google_ad_client = "ca-pub-0342339836871729";

/* 728x90, 創建於 10-1-26 */

google_ad_slot = "8648094726";

google_ad_width = 728;

google_ad_height = 90;

//-->

</script>

src="http://pagead2.googlesyndication.com/pagead/show_ads.js">

</script>

</body>

</html>

效果圖如下：

9、求網頁中圖片循環滾動代碼!

<div id=demo style=overflow:hidden;height:113;width:279>
<div id=demo1>
<table align=left cellpadding=0 cellspace=0 border=0 height="113" cellspacing="3" width="379">
<tr>
<td width="123" align="center">
<a href="http://" target="_blank">
<img border="0" src="1.gif" width="80" height="80">
<br>
第一
</td>
<td width="123" align="center">
<a href="http://" target="_blank">
<img border="0" src="2.gif" width="80" height="80">
<br>
第二
</td>
</tr>
</table>
</div>
<div id=demo2>

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

再給一個：
<div id="marquees">  <a href="#">鏈接一</a>
<br/> <a href="#">鏈接二</a>
<br/> <a href="#">鏈接三</a>
<br/> <a href="#">鏈接四</a>
<br/> 
</div>

<script language="javascript">

</script>

10、求一段設計網頁中可以讓幾個圖片不斷循環無間斷（即中間沒有空白）滾動的代碼。最好詳細一點的。

以下就是你想要的效果：把它復制到網頁上就可以了！！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>圖片滾動</title>
</head>
<body>
<style type="text/css">

</style>
<div id="demo">
<div id="indemo">
<div id="demo1">
<a href="#"><img src="https://gss0.bdstatic.com/70cFsjip0QIZ8tyhnq/img/logo-.gif" border="0" /></a>
<a href="#"><img src="https://gss0.bdstatic.com/70cFsjip0QIZ8tyhnq/img/logo-.gif" border="0" /></a>
<a href="#"><img src="https://gss0.bdstatic.com/70cFsjip0QIZ8tyhnq/img/logo-.gif" border="0" /></a>
<a href="#"><img src="https://gss0.bdstatic.com/70cFsjip0QIZ8tyhnq/img/logo-.gif" border="0" /></a>
<a href="#"><img src="https://gss0.bdstatic.com/70cFsjip0QIZ8tyhnq/img/logo-.gif" border="0" /></a>
<a href="#"><img src="https://gss0.bdstatic.com/70cFsjip0QIZ8tyhnq/img/logo-.gif" border="0" /></a>
</div>
<div id="demo2"></div>
</div>
</div>
<script>

</script>
</body>
</html>

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

網頁設計多張圖片循環滾動

與網頁設計多張圖片循環滾動相關的知識