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

纯JavaScript的渐开式幻灯片

文章来源:365jz.com     点击数:409    更新时间: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:略

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛

发表评论 (409人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
昵称:
最新评论
------分隔线----------------------------

快速入口

· 365软件
· 杰创官网
· 建站工具
· 网站大全

其它栏目

· 建站教程
· 365学习

业务咨询

· 技术支持
· 服务时间:9:00-18:00
365建站网二维码

Powered by 365建站网 RSS地图 HTML地图

copyright © 2013-2024 版权所有 鄂ICP备17013400号