一段不错的效果
<script language="javascript">
var isStart=true;
var nn;
var tt;
var bPlay=new Image;
bPlay.src = "images/bu_pla.gif";
var bPause=new Image;
bPause.src = "images/bu_pau.gif";
nn=1;
setTimeout('change_img()',4000);
function resetPlay(){
isStart=true;
var e = document.getElementById("top_slider");
var a = e.getElementsByTagName("img");
for(i=0;i<a.length;i++){
if(a.src == bPlay.src) a.src = bPause.src;
}
}
function playorpau(e){
if(e.src == "images/bu_pau.gif"){
e.src = bPlay.src ;
isStart = false;
}else{
e.src = bPause.src;
isStart = true;
}
}
function pre_img(){
resetPlay();
nn--;
if(nn < 1) nn=3;
setFocus(nn);
}
function next_img(){
resetPlay();
nn++;
if(nn > 3) nn=1;
setFocus(nn);
}
function change_img()
{
if(isStart){
nn++;
if(nn>3) nn=1;
setFocus(nn);
}else{
tt=setTimeout('change_img()',100);
}
}
function setFocus(i)
{
if(tt) clearTimeout(tt);
nn = i;
selectLayer1(i);
tt=setTimeout('change_img()',4000);
}
function selectLayer1(i)
{
switch(i)
{
case 1:
document.getElementById("bbs_s1").style.display="block";
document.getElementById("bbs_s2").style.display="none";
document.getElementById("bbs_s3").style.display="none";
break;
case 2:
document.getElementById("bbs_s1").style.display="none";
document.getElementById("bbs_s2").style.display="block";
document.getElementById("bbs_s3").style.display="none";
break;
case 3:
document.getElementById("bbs_s1").style.display="none";
document.getElementById("bbs_s2").style.display="none";
document.getElementById("bbs_s3").style.display="block";
break;
}
}
</script>
<DIV id=top_slider class="solodbox">
<!--bbs s1 -->
<DIV id=bbs_s1>
<div id="box">
<p>
<div id="solidbox_top">
<ul>
<li class="left"></li><li class="sec1"><STRONG>近日焦点</STRONG></li><li class="sec2"><a href="javascript:setFocus(2);"><STRONG>酷帖美图</STRONG></A></li><li class="sec3"><a href="javascript:setFocus(3);"><STRONG>拍卖商品</STRONG></A></li>
<li class="right">
<div id="right_box">
<A href="javascript:pre_img();"><IMG
src="images/bu_back.gif" border=0></A> <A
href="javascript:;"><IMG onclick=playorpau(this)
src="images/bu_pau.gif" border=0></A> <A
href="javascript:next_img();"><IMG
src="images/bu_next.gif" border=0></A> </div>
</li></ul>
</div></p>
<ul>
<li class="box_bg">
<!-- #BeginLibraryItem "/library/recommend_hot.lbi" --> <!-- #EndLibraryItem --></li>
<li class="box_bottom"></li>
</ul></div>
</div>
<!--bbs s2 -->
<DIV id=bbs_s2 style="DISPLAY: none">
<div id="box">
<p>
<div id="solidbox_top">
<ul>
<li class="left"></li><li class="sec1"><a href="javascript:setFocus(1);"><STRONG>近日焦点</STRONG></a></li><li class="sec2"><STRONG>酷帖美图</STRONG></li><li class="sec3"><a href="javascript:setFocus(3);"><STRONG>拍卖商品</STRONG></A></li>
<li class="right">
<div id="right_box">
<A href="javascript:pre_img();"><IMG src="images/bu_back.gif" border=0></A><A href="javascript:;"><IMG onclick=playorpau(this) src="images/bu_pau.gif" border=0></A><A href="javascript:next_img();"><IMG src="images/bu_next.gif" border=0></A></div>
</li></ul>
</div></p>
<ul>
<li class="box_bg">
<!-- #BeginLibraryItem "/library/group_buy.lbi" --><!-- #EndLibraryItem --></li>
<li class="box_bottom"></li>
</ul></div>
</div>
</div>