• 2010-07-26

    左上角开幕的js幻灯(兼容ie&ff&op) - [技术空间]

    版权声明:转载时请以超链接形式标明文章原始出处和作者信息及本声明
    http://www.blogbus.com/lily64-logs/70514690.html

    写了个左上角开幕的幻灯切换,代码存档。
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>slide</title>
    <script>
    stepw=3;
    steph=2;
    w=h=0;
    maxindex=0;
    current=1;
    obj=null;
    doflash=dostart=null;
    mycontinue=false;
    num=3;
    function myflash()
    {
    if(w>=300&&h>=200)
    {
    dostart=setTimeout("mystart()",2000);
    return;
    }
    w+=stepw;
    h+=steph;
    if(w>300)
    w=300;
    if(h>200)
    h=200;
    obj.style.width=w+'px';
    obj.style.height=h+'px';
    doflash=setTimeout("myflash()",10);
    }
    function mystart()
    {
    if(!mycontinue)
    {
    w=h=0;
    for(i=1;i<=num;i++)
    document.getElementByIdx_x("link"+i).style.background='';
    current++;
    if(current>num)current=1;
    document.getElementByIdx_x("link"+current).style.background='lightgreen';
    obj=document.getElementByIdx_x("pic"+current);
    obj.style.width=0;
    obj.style.height=0;
    if(maxindex==0)maxindex=document.getElementByIdx_x("pic1").style.zIndex;
    obj.style.zIndex=++maxindex;
    }
    else
    mycontinue=!mycontinue;
    doflash=setTimeout("myflash()",10);
    }
    function mystop()
    {
    clearTimeout(doflash);
    clearTimeout(dostart);
    doflash=null;
    dostart=null;
    }
    function mychange(linkobj)
    {
    mycontinue=false;
    document.getElementByIdx_x("mybtn").value='start';
    mystop();
    current=linkobj.id.split("link")[1];
    current--;
    document.getElementByIdx_x("mybtn").value='stop';
    mystart();
    }
    </script>
    </head>
    <body>
    <div id=pic1 style="border:1px solid green;background:lightgreen;width:300px;height:200px;overflow:hidden;position:absolute;top:100px;left:100px;z-index:2"><img src=11.gif width=300px height=200px /></div>
    <div id=pic2 style="border:1px solid green;background:lightgreen;overflow:hidden;position:absolute;top:100px;left:100px;z-index:1;"><img src=22.jpg width=300px height=200px /></div>
    <div id=pic3 style="border:1px solid green;background:lightgreen;overflow:hidden;position:absolute;top:100px;left:100px;z-index:0"><img src=33.jpg width=300px height=200px /></div>
    <div style="border:1px solid green;background:lightgreen;width:300px;height:200px;overflow:hidden;position:absolute;top:100px;left:100px;z-index:-1"></div>
    <input id=mybtn type=button value=start onclick="if(this.value=='start'){this.value='stop';mystart();}else{this.value='start';mycontinue=true;mystop()}" />
    &nbsp;&nbsp;<a id=link1 href="javascript:void(0)" onclick=mychange(this)>1</a>&nbsp;&nbsp;<a id=link2 href="javascript:void(0)" onclick=mychange(this)>2</a>&nbsp;&nbsp;<a id=link3 href="javascript:void(0)" onclick=mychange(this)>3</a>
    </body>
    </html>

    分享到:

    历史上的今天: