网页设计多张图片循环滚动_怎么实现多张图片的循环滚动

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>

导航:首页 > 万维百科 > 网页设计多张图片循环滚动

网页设计多张图片循环滚动

与网页设计多张图片循环滚动相关的知识