您现在的位置: 365建站网 > 365文章 > 纯JavaScript的渐开式幻灯片

纯JavaScript的渐开式幻灯片

文章来源:365jz.com 点击数:469 更新时间:2009-09-28 09:22

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">这里是有关研究所的详细介绍--------&gt;&gt;<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:略

生产内容,同时打通搜索引擎(SEO)与AI搜索引擎(GEO)流量入口的软件! 点击进入365建站器 »

您可能感兴趣的文章