html:
<div id="slide-box">
<div id="slide">
<div id="fbshutter" style="width:1px;">
<img id="bPic" src="images/01.gif" /> </div>
<div id="sPic" style="background:url(images/slide-pic/tab1.gif) no-repeat scroll right top;">
<ul>
<li onclick="javascript:changeImg(5)"></li>
<li onclick="javascript:changeImg(4)"></li>
<li onclick="javascript:changeImg(3)"></li>
<li onclick="javascript:changeImg(2)"></li>
<li onclick="javascript:changeImg(1)"></li>
</ul>
</div><!-- *******************************fbshutter*********************-->
</div>
<p id="pic-content"><a href="#"></a></p>
<p id="intro-more">这里是有关研究所的详细介绍-------->><a href="#">更多</a></p>
<div class="clear"></div>
</div>
js:
<script type="text/javascript">
var gi=1;
setTimeout("tab()",0);
function tab()
{
var s=1;
if(gi>5) gi=1;
if(s==1) setTimeout("changeImg("+gi+")",0);
else{
setTimeout("changeImg("+gi+")",8000);
}
gi++;
s=2;
setTimeout("tab()",8000);
}
function changeImg(gi)
{ var slideDiv=document.getElementById('slide');
var picDiv=document.getElementById('fbshutter');
picDiv.style.width="1px";
var slideBackground="images/bg.gif";
var aBgPic=new Array("images/slide-pic/tab1.gif","images/slide-pic/tab2.gif","images/slide-pic/tab3.gif","images/slide-pic/tab4.gif","images/slide-pic/tab5.gif");
var asbDivPic=new Array('images/slide-pic/01.gif','images/slide-pic/02.gif','images/slide-pic/03.gif','images/slide-pic/04.gif','images/slide-pic/05.gif');
var aContent=new Array("图片一的内容是全国首...","图片二的内容是全国首...","图片三的内容是全国首...","图片四的内容是全国首...","图片五的内容是全国首...");
var sbDiv=document.getElementById('bPic');
var smDiv=document.getElementById('sPic');
var sP=document.getElementById('pic-content');
sP.getElementsByTagName('a')[0].innerHTML=aContent[gi-1];
smDiv.style.background='url('+aBgPic[gi-1]+') no-repeat scroll right top';
var sSrc=asbDivPic[gi-1];
sbDiv.setAttribute('src',sSrc);
setTimeout("shutter()",100);
if(gi-2<0) slideDiv.style.background='url('+asbDivPic[asbDivPic.length-1]+') no-repeat scroll left top';
else{
slideDiv.style.background='url('+asbDivPic[gi-2]+') no-repeat scroll left top';
}
}
function shutter()
{
var sDiv=document.getElementById('fbshutter');
var Width=20;
if(parseInt(sDiv.style.width)<481){
sDiv.style.width=parseInt(sDiv.style.width)+Width+"px";
setTimeout("shutter()",100);
}
}
</script>
css:略
如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛