html静态网页中如何制作一个图片滚动的代码，急！
我想在静态的html页面中实现官网上有4张图片右下角有小标签，放上去自动切图的形式；且过个5秒自动换图的。用Dreamweaver做，不知可行否？？？不带后台的.cs代码，纯网页制作。
我在别的网站源代码里截取的代码；代码如下：
<script type="text/javascript">
var files="../Zouecp/PicFiles/2012.11.16_11.27.27_3337.jpg|../Zouecp/PicFiles/2012.11.13_19.29.44_8317.jpg|../Zouecp/PicFiles/2012.11.13_21.38.25_1909.jpg|../Zouecp/PicFiles/2012.11.13_22.2.15_2123.jpg";//链接不是类似E:\web\web\tongrun\image的么，怎么/会向左边啊？
var links="#|#|#|#";
var texts="#|#|#|#";
var TitleBgColor="0xFFFFFF"//TitleBgColor 图片名称文字背景颜色 0xFF6600
var TitleBgAlpha="100"//TitleBgAlpha 图片名称文字背景颜色透明度：0-100值，0表示全部透明 60
var TitleBgPosition="1000"//TitleBgPosition 图片名称文字位置，0表示文字在顶端，1表示文字在底部，2表示文字在顶端浮动 100
var BtnDefaultColor="0xFF6600"//BtnDefaultColor 按键默认的颜色0xFF6600
var BtnOverColor="0x000033"//BtnOverColor 按键当前的颜色 0x000033
var AutoPlayTime="4"//AutoPlayTime 自动播放时间：单位是秒 3
var Tween="3"//Tween 图片过渡效果：0，表示亮度过渡，1表示透明度过渡，2表示模糊过渡，3表示运动模糊过渡 2
varIsShowBtn="1"//IsShowBtn 是否显示按钮：1表示显示按键，0表示隐藏按键，更适合做广告挑轮换1
var WinOpen="_blank"//WinOpen 打开窗口：_blank表示新窗口打开。_self表示在当前窗口打开 _blank
var FlashVarst= "bcastr_file="+files+"&bcastr_title="+texts+"&TitleBgColor="+TitleBgColor+"&TitleBgAlpha="+TitleBgAlpha+"&TitleBgPosition="+TitleBgPosition+"&BtnDefaultColor="+BtnDefaultColor+"&BtnOverColor="+BtnOverColor+"&AutoPlayTime="+AutoPlayTime+"&Tween="+Tween+"&IsShowBtn="+IsShowBtn+"&WinOpen="+WinOpen
var FocusFlash = new focusFlash("images/flashpic.swf","focusflash","100%","233","7","#ffffff",false,"High");
FocusFlash.addParam("allowScriptAccess", "sameDomain");
FocusFlash.addParam("menu", "false");
FocusFlash.addParam("wmode", "opaque");
FocusFlash.addParam("FlashVars", FlashVarst );
FocusFlash.write("focusViwer");
</script>
如果可行的话代码能改得简单点不？只2张图片来回滚就好，求做个示范啊！！！！
[解决办法]
focus.swf
还要以用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=gb2312" />
<title>图片轮换</title>
<style type="text/css">
<!--
#Layer1 {
position:absolute;
width:421px;
height:275px;
z-index:1;
}
#Layer2 {
position:absolute;
width:21px;
height:18px;
z-index:1;
left: 154px;
top: 18px;
visibility: visible;
}
#Layer3 {
position:absolute;
width:21;
height:18;
z-index:2;
left: 192px;
top: 18px;
visibility: visible;
}
#Layer4 {
position:absolute;
width:21;
height:18;
z-index:3;
left: 228px;
top: 18px;
visibility: visible;
}
#Layer5 {
position:absolute;
width:21;
height:18;
z-index:4;
left: 268px;
top: 18px;
visibility: visible;
}
-->
a{ text-align:center; text-decoration:none; text-align:center}
#Layer6 {
position:absolute;
width:94px;
height:65px;
z-index:5;
left: 121px;
top: 301px;
}
#Layer7 {
position:absolute;
width:90px;
height:63px;
z-index:6;
left: 15px;
top: 301px;
}
#Layer8 {
position:absolute;
width:94px;
height:62px;
z-index:7;
left: 236px;
top: 302px;
}
#Layer9 {
position:absolute;
width:97px;
height:60;
z-index:8;
left: 339px;
top: 300px;
}
#Layer10 {
position:absolute;
width:103px;
height:33px;
z-index:9;
left: 7px;
top: 195px;
}
#Layer11 {
position:absolute;
width:450px;
height:81px;
z-index:9;
left: 1px;
top: 216px;
background-color: #666666;
visibility: hidden;
}
#div1 {
height: 600px;
width: 260px;
padding: 20px;
background-repeat: repeat;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale
}
</style>
<script language="JavaScript" type="text/javascript">
function show(ss){
switch(ss){
case 'a':
var imagea=document.getElementById("img");
imagea.setAttribute("src","img/01.jpg");
break;
case 'b':
var imageb=document.getElementById("img");
imageb.setAttribute("src","img/02.jpg");
break;
case 'c':
var imagec=document.getElementById("img");
imagec.setAttribute("src","img/03.jpg");
break;
case 'd':
var imaged=document.getElementById("img");
imaged.setAttribute("src","img/04.jpg");
break;
}
}
</script>
</head>
<body>
<div id="Layer1">
<img src="img/01.jpg" id="img">
<div id="Layer7"><img src="img/btn_01.jpg" width="97" height="64" id="imga" onmouseover="show('a')"/></div>
<div id="Layer6"><img src="img/btn_02.jpg" width="97" height="64" id="imgb" onmouseover="show('b')"/></div>
<div id="Layer8"><img src="img/btn_03.jpg" width="97" height="64" id="imgc" onmouseover="show('c')"/></div>
<div id="Layer9"><img src="img/btn_04.jpg" width="97" height="64" id="imgd" onmouseover="show('d')"/></div>
<div id="Layer2" align="center"><a href="javascript:show('a')">1</a></div>
<div id="Layer3" align="center"><a href="javascript:show('b')">2</a></div>
<div id="Layer4" align="center"><a href="javascript:show('c')">3</a></div>
<div id="Layer5" align="center"><a href="javascript:show('d')">4</a></div>
</div>
</body>
</html>
<!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>
<link href="css/scrollTop.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!--循环向上滚动的文字开始-->
<div class="domes">
<div class="dome_top">近7日畅销榜</div>
<div id="dome">
<div id="dome1">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/scrollTop_1.jpg" alt="html静态网页中怎么制作一个图片滚动的代码，" /></td>
<td><div class="title">社交疯狂项语</div>
<font class="price">￥57.00</font> 折扣：52折</td>
</tr>
<tr>
<td><img src="images/scrollTop_2.jpg" alt="html静态网页中怎么制作一个图片滚动的代码，" /> </td>
<td><div class="title">傲慢与偏见</div>
<font class="price">￥20.00</font> 折扣：25折</td>
</tr>
<tr>
<td><img src="images/scrollTop_3.jpg" alt="html静态网页中怎么制作一个图片滚动的代码，" /></td>
<td><div class="title">玻璃鞋全集（50集34VCD）</div>
主演：金贤珠 金芝荷
<font class="price">￥300.00</font> 折扣：52折</td>
</tr>
<tr>
<td><img src="images/scrollTop_4.jpg" alt="html静态网页中怎么制作一个图片滚动的代码，" /></td>
<td><div class="title">澳大利亚：假日之旅</div>
<font class="price">￥53.00</font> 折扣：51折</td>
</tr>
<tr>
<td><img src="images/scrollTop_5.jpg" alt="html静态网页中怎么制作一个图片滚动的代码，" /> </td>
<td><div class="title">浪漫地中海：假日之旅</div>
<font class="price">¥80.00</font> 折扣：52折</td>
</tr>
<tr>
<td><img src="images/scrollTop_6.jpg" alt="html静态网页中怎么制作一个图片滚动的代码，" /></td>
<td><div class="title">老人与海</div>
<font class="price">¥57.00</font> 折扣：52折</td>
</tr>
<tr>
<td><img src="images/scrollTop_7.jpg" alt="html静态网页中怎么制作一个图片滚动的代码，" /></td>
<td><div class="title">欧陆风情：假日之旅</div>
<font class="price">¥53.00</font> 折扣：52折</td>
</tr>
</table>
</div>
<div id="dome2"></div>
</div>
</div>
<script src="js/scrollTop.js" type="text/javascript"></script>
<!--循环向上滚动的文字结束-->
<!--循环向上滚动的文字的实现思路-->
<div class="main">
一、循环向上滚动的文字，如上面的滚动效果<br />
二、实现的思路 <br />
<div class="left_indent">1、建立三个层dome、dome1、dome2 <br /> 2、垂直滚动的文字在dome1上 <br /> 3、通过层的滚动来实现文字滚动
</div>
三、源代码 <br />
<div class="left_indent"><html><br />
<head><br />
<title>循环向上滚动的文字</title><br />
<font class="red"><link href="css/scrollTop.css" rel="stylesheet" type="text/css" /><br /></font>
</head><br />
<body><br />
<div class="domes"><br />
<div class="dome_top">近7日畅销榜</div><br />
<font class="red"><div id="dome"><br />
<div id="dome1"><br /></font>
<table width="100%" border="0" cellspacing="0" cellpadding="0"><br />
<tr><br />
<td><img src="images/scrollTop_1.jpg" alt="scroll" /></td><br />
<td><div class="title">社交疯狂项语</div><br />
<font class="price">￥57.00</font> 折扣：52折</td><br />
</tr><br />
<tr><br />
<td><img src="images/scrollTop_2.jpg" alt="scroll" /> </td><br />
<td><div class="title">傲慢与偏见</div><br />
<font class="price">￥20.00</font> 折扣：25折</td><br />
</tr><br />
<tr><br />
<td><img src="images/scrollTop_3.jpg" alt="scroll" /></td><br />
<td><div class="title">玻璃鞋全集（50集34VCD）</div><br />
主演：金贤珠 金芝荷<br />
<font class="price">￥300.00</font> 折扣：52折</td><br />
</tr><br />
<tr><br />
<td><img src="images/scrollTop_4.jpg" alt="scroll" /></td><br />
<td><div class="title">澳大利亚：假日之旅</div><br />
<font class="price">￥53.00</font> 折扣：51折</td><br />
</tr><br />
<tr><br />
<td><img src="images/scrollTop_5.jpg" alt="scroll" /> </td><br />
<td><div class="title">浪漫地中海：假日之旅</div><br />
<font class="price">&yen;80.00</font> 折扣：52折</td><br />
</tr><br />
<tr><br />
<td><img src="images/scrollTop_6.jpg" alt="scroll" /></td><br />
<td><div class="title">老人与海</div><br />
<font class="price">&yen;57.00</font> 折扣：52折</td><br />
</tr><br />
<tr><br />
<td><img src="images/scrollTop_7.jpg" alt="scroll" /></td><br />
<td><div class="title">欧陆风情：假日之旅</div><br />
<font class="price">&yen;53.00</font> 折扣：52折</td><br />
</tr><br />
</table><br />
</div><br />
<font class="red"><div id="dome2"></div><br /></font>
</div><br />
</div><br />
<font class="red"><script src="js/scrollTop.js" type="text/javascript"></script><br /></font>
</body><br />
</html></div>
四、设置id为dome的层的div源代码
<div class="left_indent">#dome{<br />
overflow:hidden; /*溢出的部分不显示*/<br />
height:180px;<br />
padding:5px;<br />
}</div>
五、实现循环向上滚动的JavaScript代码
<div class="left_indent"> function $(element){<br />
return document.getElementById(element);<br />
}<br />
var dome=$("dome");<br />
var dome1=$("dome1");<br />
var dome2=$("dome2");<br />
var speed=50; //设置向上滚动速度<br />
dome2.innerHTML=dome1.innerHTML //复制dome1为dome2<br />
function moveTop(){<br />
<font class="red">if(dome2.offsetTop-dome.scrollTop<=0)</font> //当滚动至dome1与dome2交界时<br />
<font class="red">dome.scrollTop-=dome1.offsetHeight</font> //dome跳到最顶端<br />
else{<br />
<font class="red">dome.scrollTop++</font><br />
}<br />
}<br />
<font class="red">var MyMar=setInterval(moveTop,speed)</font> //设置定时器<br />
<font class="red">dome.onmouseover=function() {clearInterval(MyMar)} </font> //鼠标移上时清除定时器达到滚动停止的目的<br />
<font class="red">dome.onmouseout=function() {MyMar=setInterval(moveTop,speed)}</font> //鼠标移开时重设定时器，继续滚动
<br /><br />
</div>
</div>
</body>
</html>
<html>
<head>
<style>
div{
cursor: pointer;
font-size:10pt;
}
.pb{
width:300px;/*单个图片的宽（和显示区域相同）*/
height:300px;/*单个图片的高（和显示区域相同）*/
}
#plist{
position:relative;
top:-29px;
}
#pshow{
width:300px;/*显示区域的宽度*/
height:300px;/*显示区域的高度*/
overflow: hidden;
position:absolute;
top:20px;
left:20px;
}
</style>
<script src="jquery-1.9.1.js" type="text/javascript"></script>
<script>
var i=1;
function pchange(obj){
var imgtop=((0-(obj-1))*300-29)+"px";
$("#plist").animate({
top:imgtop
},"slow");
i=obj++;
if(i>4){
i=1;
}
}
function timechange(){
pchange(i);
i++;
if(i>4){
i=1;
}
setTimeout('timechange()',3000);
}
</script>
</head>
<body onload="timechange()">
<div id="pshow">
<div style="display:table;position:relative;left:150px;top:260px;z-index:99;">
<div style="display:table-cell;width:25px;height:20px;background:#EEEE00;text-align:center;" onmouseover="pchange(1)">1</div>
<div style="display:table-cell;width:10px;height:20px;"></div>
<div style="display:table-cell;width:25px;height:20px;background:#EEEE00;text-align:center;" onmouseover="pchange(2)">2</div>
<div style="display:table-cell;width:10px;height:20px;"></div>
<div style="display:table-cell;width:25px;height:20px;background:#EEEE00;text-align:center;" onmouseover="pchange(3)">3</div>
<div style="display:table-cell;width:10px;height:20px;"></div>
<div style="display:table-cell;width:25px;height:20px;background:#EEEE00;text-align:center;" onmouseover="pchange(4)">4</div>
</div>
<div id="plist">
<div class="pb" style="background:green;">
</div>
<div class="pb" style="background:red;">
</div>
<div class="pb" style="background:blue;">
</div>
<div class="pb" style="background:yellow;">
</div>
</div>
</div>
</body>
</html>
