js代码
<script type="text/javascript">
window.onload=function()
{    var dealy=5000;               //3秒滾動一张圖片，可自行修改    var MyBox=document.getElementById('mF_ysw_wrap');    var word=document.getElementById('wenzi');    var txt=document.getElementById('txt').getElementsByTagName('li');;    var oBox=document.getElementById('box');    var aList=document.getElementById('list');    var aNum=document.getElementById('num').getElementsByTagName('li');    var timer=null;    var now=0;    for (var i=0; i<aNum.length; i++)    {    aNum[i].index=i;    aNum[i].onmouseover=function()    {    now=this.index;    play(Running);    }    }    function play(fn)    {    for (var i=0; i<aNum.length; i++)    {    aNum[i].className='';    }    aNum[now].className='active';    fn(aList,{top:-331*now});    }    function auto()    {    clearInterval(timer);    timer=setInterval(function()    {    now++;    if(now==aNum.length)    {    now=0;    }    play(Flexing);    }, dealy);    }    auto();    MyBox.onmouseover=function()    {    clearInterval(timer);    }    MyBox.onmouseout=function()    {    auto();    }
}
</script>

主要处理函数

function getStyle(obj,name)
{if(obj.currentStyle){return obj.currentStyle[name];}else{return getComputedStyle(obj,false)[name];}
}function Running(obj,json,fnEnd)
{clearInterval(obj.timer);obj.timer=setInterval(function(){var now=0;var bStop=true;for (var attr in json){if(attr=='opacity'){now=Math.round(parseFloat(getStyle(obj,attr))*100);}else{now=parseInt(getStyle(obj,attr));document.getElementById('wenzi').value=attr;}var speed=(json[attr]-now)/5;speed=speed>0?Math.ceil(speed):Math.floor(speed);if(now!=json[attr])bStop=false;if(attr=='opacity'){obj.style.filter='alpha(opacity:'+now+speed+')';obj.style.opacity=(now+speed)/100;}else{obj.style[attr]=speed+now+'px';}}if(bStop){clearInterval(obj.timer);if(fnEnd)fnEnd();}}, 30);
}function Flexing(obj,json,fnEnd)
{clearInterval(obj.timer);obj.timer=setInterval(function(){var now=0;var bStop=true;for (var attr in json){if(!obj.speed)obj.speed={};if(!obj.speed[attr])obj.speed[attr]=0;now=parseInt(getStyle(obj,attr));if(Math.abs(json[attr]-now)>1 || Math.abs(obj.speed[attr])>1){bStop=false;obj.speed[attr]+=(json[attr]-now)/5;obj.speed[attr]*=0.85;var MaxSpeed=50;if(Math.abs(obj.speed[attr])>MaxSpeed){obj.speed[attr]=obj.speed[attr]>0?MaxSpeed:-MaxSpeed;}obj.style[attr]=now+obj.speed[attr]+'px';}}if(bStop){clearInterval(obj.timer);obj.style[attr]=json[attr]+'px';if(fnEnd)fnEnd();}}, 30);
}

body部分内容

<input type="text" id="wenzi" value="">
<div class="mF_ysw_wrap" id="mF_ysw_wrap">
<div id="myFocus" class=" mF_ysw mF_ysw_myFocus">
<div class="slider">
<div class="pic" id="box">    <ul id="list" style="width:679px; top:0px;position:absolute;">
<li style="width: 679px;"><a href="#"><img width="679" height="331" src="img/1.jpg" thumb="" alt="酷站代码整理" text="图片1更详细的描述文字"></a></li>
<li style="width: 679px;"><a href="#"><img width="679" height="331" src="img/2.jpg" thumb="" alt="酷站代码整理" text="图片2更详细的描述文字"></a></li>
<li style="width: 679px;"><a href="#"><img width="679" height="331" src="img/3.jpg" thumb="" alt="酷站代码整理" text="图片3更详细的描述文字"></a></li>
<li style="width: 679px;"><a href="#"><img width="679" height="331" src="img/4.jpg" thumb="" alt="酷站代码整理" text="图片4更详细的描述文字"></a></li>
<li style="width: 679px;"><a href="#"><img width="679" height="331" src="img/5.jpg" thumb="" alt="酷站代码整理" text="图片5更详细的描述文字"></a></li>    </ul>
</div>
<div class="txt" id="txt">
<ul>    <li style="top: 0px;"><a href="#">酷站代码整理</a><p>图片1更详细的描述文字</p><b></b></li>    <li style="top: 0px;"><a href="#">酷站代码整理</a><p>图片2更详细的描述文字</p><b></b></li>    <li style="top: 0px;"><a href="#">酷站代码整理</a><p>图片3更详细的描述文字</p><b></b></li>    <li style="top: 0px;"><a href="#">酷站代码整理</a><p>图片4更详细的描述文字</p><b></b></li>    <li style="top: 0px;"><a href="#">酷站代码整理</a><p>图片5更详细的描述文字</p><b></b></li>
</ul>
</div>
</div>
</div>
<div class="num" id="num">
<ul>    <li class="active"><img src="img/1.jpg" width="80" height="50"><a>图片1更详细的描述文字</a><b></b></li>    <li><img src="img/2.jpg" width="80" height="50"><a>图片2更详细的描述文字</a><b></b></li>    <li><img src="img/3.jpg" width="80" height="50"><a>图片3更详细的描述文字</a><b></b></li>    <li><img src="img/4.jpg" width="80" height="50"><a>图片4更详细的描述文字</a><b></b></li>    <li><img src="img/5.jpg" width="80" height="50"><a>图片5更详细的描述文字</a><b></b></li>
</ul>
</div>
</div>

样式

<style type="text/css">
body { background:#fff; padding:20px;}
.mF_ysw_wrap{position: relative;float: left;overflow: hidden;padding: 6px;border: 1px solid #333;width:946px;height:331px;}
#myFocus {width: 679px;height: 331px;clear: both;}
.mF_ysw_myFocus * {margin: 0;padding: 0;border: 0;list-style: none;}
.mF_ysw_wrap * {margin: 0;padding: 0;border: 0;list-style: none;}
.mF_ysw_myFocus {position: relative;height: 331px;overflow: hidden;font: 12px/1.5 Verdana;text-align: left;background: #fff;visibility: visible!important;}
.mF_ysw .slider {height: 100%;position: absolute;overflow: hidden;}
.mF_ysw .slider .pic {height: 100%;width: 100%;}
.mF_ysw_myFocus .pic {position: relative;height: 331px;overflow: hidden;}
.mF_ysw .slider .pic li {height: 331px;overflow: hidden;float:left;}
.mF_ysw .slider .txt {width: 100%;}
.mF_ysw .slider .txt li {position: relative;height: 34px;line-height: 34px;display:inline-block;}
.mF_ysw_myFocus .txt li {width: 675px;height: 34px !important;}
.mF_ysw .slider .txt li a {position: relative;z-index: 1;color: #fff;font-size: 14px;font-weight: bold;text-decoration:none;}
.mF_ysw .slider .txt li b {width:679px;height: 100%;position: absolute;top: 0;background: #000;filter: alpha(opacity=40);opacity: 0.4;}
.mF_ysw_wrap .num {width:260px;position: absolute;z-index: 2;bottom: 6px;right: 12px;}
.mF_ysw_wrap .num li {width: 260px;height: 60px;line-height: 16px;margin-left: 4px;text-align: center;border: 1px solid #000;cursor: pointer;margin-top:5px;}
.mF_ysw_wrap .num li img{margin-top:5px;position:absolute;left:10px;}
.mF_ysw_wrap .num li a{margin-top:5px;position:absolute;left:100px;font-family:"微软雅黑";font-size:14px;}
.mF_ysw_wrap .num li.active{background:#ff9900;color:white;}
</style>