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
var IsShowBtn="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张图片来回滚就好，求做个示范啊！！！！

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

focus.swf
还要以用jquery
jquery是怎么用的？
我先要下载一个jquery再在<script type="text/javascript" 这里src="jquery.js"？对否？>
我把这段代码加进去为什么图片都没显示啊，
求大神   <script type="text/javascript" src="jquery.js">
   
</script>
我写上src="focusflash.js"连图片都不显示了
其实focus.swf的实现是最简单的
1\先下载focus.swf这个文件
2\配置focus.swf参数我等下做个简单的实例给你
哦。有了，还有个问题。。下载了个focusflash.js.为什么还那个focus.swf,刚才.swf没放进去
<!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">

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="scroll" /></td>
    <td><div class="title">社交疯狂项语</div>
     <font class="price">￥57.00</font> 折扣：52折</td>
  </tr>
  <tr>
    <td><img src="images/scrollTop_2.jpg" alt="scroll" /> </td>
    <td><div class="title">傲慢与偏见</div>
     <font class="price">￥20.00</font> 折扣：25折</td>
  </tr>
  <tr>
    <td><img src="images/scrollTop_3.jpg" alt="scroll" /></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="scroll" /></td>
    <td><div class="title">澳大利亚：假日之旅</div>
     <font class="price">￥53.00</font> 折扣：51折</td>
  </tr>
  <tr>
    <td><img src="images/scrollTop_5.jpg" alt="scroll" /> </td>
    <td><div class="title">浪漫地中海：假日之旅</div>
     <font class="price">¥80.00</font> 折扣：52折</td>
  </tr>
  <tr>
    <td><img src="images/scrollTop_6.jpg" alt="scroll" /></td>
    <td><div class="title">老人与海</div>
     <font class="price">¥57.00</font> 折扣：52折</td>
  </tr>
   <tr>
    <td><img src="images/scrollTop_7.jpg" alt="scroll" /></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>
focus.swf 例子
实用jquery可以很轻松的实现。。代码如下。。<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>
可以实现了，不过我如果想取消下面的可见的  x.jpg链接，还有点击图片自动就跳出图片。这个该要到js里改么？
取消下面的链接是取消浏览器的状态栏显示吗。。那个不太好弄。。自动跳出图片如果是放大的话做个div用js控制一下就好了