怎么实现多张图片的循环滚动?
图片滚动，实际上就是设置的一段时间之后切换下展示的图片。附件为完整的例子。
代码展示：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图片切换效果</title>
<script src="RevealTrans.js"></script>
</head>
<body>
<style type="text/css">
.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 id="idShow" class="container">
</div>
<div id="idPicShow" class="container">
<ul id="idNum">
</ul>
</div>
<div id="idPicText"></div>
<div id="idPicList"></div>
<script>
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 />
<script type="text/javascript"><!--
google_ad_client = "ca-pub-0342339836871729";
/* 728x90, 创建于 10-1-26 */
google_ad_slot = "8648094726";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</body>
</html>
效果图如下：
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
demo.scrollLeft=demo.scrollWidth
function Marquee(){
if(demo.scrollLeft<=0)
demo.scrollLeft+=demo2.offsetWidth
else{
demo.scrollLeft--
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
至于你所说的前后衔接其实是没办法实现的,你所看到的前后衔接效果只是当到达最后一张的时候,马上移回第一张,这样看起来就像一直移下去..
要实现这样只需要加一个JS代码,不过我忘记了,你网上找找...
dataformatas=HTML
direction=left
height=136
loop=y
scrollamount=1
scrolldelay=2
width=100%
onMouseOver='this.stop()'
onMouseOut='this.start()'>
<table><tr>
<td><img
src="1.gif"></td>
<td><img
src="1.gif"></td>
<td><img
src="1.gif"></td>
<td><img
src="1.gif"></td>
</tr>
</table>
</marquee>
