• 2006-10-26

    前后翻页的js代码(兼容ie&ff)(修订版) - [技术空间]

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

    为自适应浏览器设置,这两天一直在寻找更好的解决办法。经各种测试,最后确认background-image:url()方式无法预装载图像,而img src方式可行。于是需要解决div自适应图片大小的问题,需要加用overflow来主动控制其大小。更新代码如下,此代码运行效果已与浏览器设置无关。演示效果也已更新。
    参考链接:http://dev.hackbase.com/hackbase14/how330540.htm
    <input id=mybtn2 type=button value=last o n c l i c k='myobj(false)'><input id=mybtn type=button value=next o n c l i c k='myobj(true)'><br>
    <div id=mydiv>
    <div style="position:absolute;z-index:4;width:280;height:187;overflow:hidden"><img></div>
    <div style="position:absolute;z-index:3;width:280;height:187;overflow:hidden"><img></div>
    <div style="position:absolute;z-index:2;width:280;height:187;overflow:hidden"><img></div>
    <div style="position:absolute;z-index:1;width:280;height:187;overflow:hidden"><img></div>
    </div>
    <s c r i p t>
    w=280;
    speed1=1;
    speed2=3;
    mybool=true;
    i=0;
    obj=null;
    function mypage()
    {
    if(mybool)
    {
    if(obj.offsetWidth-speed2>=0)
    obj.style.width=obj.offsetWidth-speed2;
    else
    obj.style.width=0;
    if(obj.offsetWidth>0)
    setTimeout(mypage,speed1);
    else
    {
    document.getElementById("mybtn").disabled=false;
    document.getElementById("mybtn2").disabled=false;
    return;
    }
    }
    else
    {
    if(obj.offsetWidth+speed2<=w)
    obj.style.width=obj.offsetWidth+speed2;
    else
    obj.style.width=w;
    if(obj.offsetWidth<w)
    setTimeout(mypage,speed1);
    else
    {
    document.getElementById("mybtn").disabled=false;
    document.getElementById("mybtn2").disabled=false;
    return;
    }
    }
    }
    function myobj(mybool2)
    {
    document.getElementById("mybtn").disabled=true;
    document.getElementById("mybtn2").disabled=true;
    mybool=mybool2;
    if(mybool2)
    {
    if(i==document.getElementById("mydiv").getElementsByTagName("div").length-1)
    {
    document.getElementById("mydiv").getElementsByTagName("div")[0].style.width=w;
    document.getElementById("mydiv").getElementsByTagName("div")[0].style.zIndex=0;
    }
    if(i<document.getElementById("mydiv").getElementsByTagName("div").length)
    {
    obj=document.getElementById("mydiv").getElementsByTagName("div")[i++];
    }
    else
    {
    i=0;
    obj=document.getElementById("mydiv").getElementsByTagName("div")[i++];
    obj.style.zIndex=100;
    for(j=1;j<document.getElementById("mydiv").getElementsByTagName("div").length;j++)
    document.getElementById("mydiv").getElementsByTagName("div")[j].style.width=w;
    }
    }
    else
    {
    if(i==1)
    {
    document.getElementById("mydiv").getElementsByTagName("div")[0].style.width=0;
    document.getElementById("mydiv").getElementsByTagName("div")[0].style.zIndex=100;
    }
    if(i>0)
    {
    obj=document.getElementById("mydiv").getElementsByTagName("div")[--i];
    }
    else
    {
    i=document.getElementById("mydiv").getElementsByTagName("div").length-1;
    obj=document.getElementById("mydiv").getElementsByTagName("div")[i];
    document.getElementById("mydiv").getElementsByTagName("div")[0].style.zIndex=0;
    for(j=1;j<document.getElementById("mydiv").getElementsByTagName("div").length;j++)
    document.getElementById("mydiv").getElementsByTagName("div")[j].style.width=0;
    }
    }
    mypage();
    }
    preload=new Array();
    myimg=new Array();
    myimg[0]="http://www.jingqi.com/zhuanti/20061011/20061011-2.jpg";
    myimg[1]="http://www.jingqi.com/zhuanti/20061011/20061011-1.jpg";
    myimg[2]="http://www.jingqi.com/zhuanti/20061011/20061011-4.jpg";
    myimg[3]="http://www.jingqi.com/zhuanti/20061011/20061011-3.jpg";
    for(k=0;k<document.getElementById("mydiv").getElementsByTagName("div").length;k++)
    {
    preload[k]=new Image();
    preload[k].src=myimg[k];
    document.getElementById("mydiv").getElementsByTagName("div")[k].childNodes[0].src=preload[k].src;
    }
    </s c r i p t>

    分享到:

    历史上的今天: