首页幻灯片-当当网 js - 湛然常寂

<!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>
<title>当当网</title>

<STYLE type=text/css>

BODY
{
line-height:20px;
background-color:#e2e2e2;
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
WIDTH: 426px;
PADDING-TOP: 0px;
POSITION: absolute;
HEIGHT: 240px;
}
/* ============首页幻灯 ============ */
#lantern{width:426px; height:240px; overflow:hidden; border:1px solid #ffffff; cursor:pointer;}
#lanternMain{width:426px; height:224px; background-color:#FFFFFF}

#lanternNavy{width:1000px; height:16px; overflow:hidden; float:left; font-size:12px; text-align:center; color: #FFFFFF;}
#lanternNavy .div_off1{ height:16px; background-color:#BBBBBB;border-left:0px solid #FFCC00;border-bottom:1px solid #FFFFFF; float:left;text-align:center;}
#lanternNavy .div_on1{ padding-left:10px; padding-right:24px;height :16px; background-color: #CC3300;border-left:0px solid #FFCC00; border-bottom:1px solid #FFFFFF; float:left;}

#lanternNavy .div_off2{ height:16px; background-color:#BBBBBB;border-left:1px solid #FFCC00;border-bottom:1px solid #FFFFFF; float:left;text-align:center;}
#lanternNavy .div_on2{ padding-left:10px; padding-right:24px;height :16px; background-color: #CC3300;border-left:1px solid #FFCC00; border-bottom:1px solid #FFFFFF; float:left;}

#lanternNavy .div_off3{ height:16px; background-color:#BBBBBB;border-left:1px solid #FFCC00;border-bottom:1px solid #FFFFFF; border-right:2px solid #FFCC00; float:left;text-align:center;}
#lanternNavy .div_on3{ padding-left:10px; padding-right:24px;height :16px; background-color: #CC3300;border-left:1px solid #FFCC00; border-bottom:1px solid #FFFFFF;border-right:2px solid #FFCC00; float:left;}

#lanternImg{position:absolute; width:426px; height:224px; overflow:hidden; z-index:0; }

.jumppage{ float:left; width:75px;height:29px }/*2008-09-16WW修改*/

</STYLE>
<script type="text/javascript">
//ff支持
function isIE(){ //ie?
   if (window.navigator.userAgent.toLowerCase().indexOf("msie")>=1)
    return true;
   else
    return false;
}

//首页幻灯
var Lantern={

    onChange:[],
    oInterval:[],
    otimeOut:[],
    opacityNum:101,
    cycNum:0,
    showNum:0,
    width:426,//整体宽度
    navyCtr:[],//2维: 0.原长 1.目标长 2.speed
    navyTime:10,//navy动画时间
    picMoveSpeed:22,//图片移动速度
    timeOut_time:7000,//停滞时间
    info ://0.图片url 1.名称 2.链接地址
    [],

    init: function(){
        Lantern.onChange=false;
        for(var i=0;i<Lantern.info.length;i++)
        {
            var picDiv
            var picTemp
            picDiv=document.createElement('div');
            picTemp=document.createElement('img');
         picDiv.id ="LanternImg"+i;
            picDiv.name=i;
         picTemp.src = Lantern.info[i][0];
         picTemp.style.width = "426px";
         picDiv.style.position ="absolute";
         picDiv.style.left =Lantern.width+"px";
         picDiv.onclick=function(){window.open(Lantern.info[this.name][2]);};
         picDiv.appendChild(picTemp);
         document.getElementById("lanternImg").appendChild(picDiv);
         var divTemp
         divTemp=document.createElement('div');
         divTemp.id ="LanternN"+i;
            divTemp.name=i;
         divTemp.innerHTML="<strong>"+(i+1)+"</strong><span id=\"lanternNc"+i+"\" style=\"display:none\"> "+Lantern.info[i][1]+"</span>";
         if(i==0)
            {
               divTemp.className ="div_off1";
            }
            else if(i==Lantern.info.length-1)
            {
                divTemp.className ="div_off3";
            }
            else
            {
                divTemp.className ="div_off2";
            }
         //divTemp.className="div_off";
         if(i==0)
             divTemp.onclick=function(){window.open(Lantern.info[this.name][2]);};
         else
             divTemp.onclick=function(){if(!Lantern.onChange){Lantern.onChange=true;Lantern.setNavy(this.name);}};
         document.getElementById("lanternNavy").appendChild(divTemp);
        }

        Lantern.initNany();
    },

    initNany:function(){
        navyCtr=new Array();
        for(var k=0;k<Lantern.info.length;k++)
            Lantern.navyCtr[k]=[];
        document.getElementById("lanternNc0").style.display ="";
        document.getElementById("LanternN0").className ="div_on1";
        var onLength,offLength
        onLength=document.getElementById("LanternN0").offsetWidth
        offLength=(Lantern.width-onLength)/(Lantern.info.length-1)
        var numtemp=0;
        for(var j=0;j<Lantern.info.length;j++)
        {
              if(j!=0)//未选
              {
                     Lantern.navyCtr[j][1]=offLength;
                     document.getElementById("lanternNc"+j).style.display ="none";
                    if(j==Lantern.info.length-1)
                    {
                        document.getElementById("LanternN"+j).className ="div_off3";
                    }
                    else
                    {
                        document.getElementById("LanternN"+j).className ="div_off2";
                    }
                     document.getElementById("LanternN"+j).style.width=offLength+"px";
                     if(j==Lantern.info.length-1)
                     {
                        document.getElementById("LanternN"+j).style.width=(Lantern.width-onLength-numtemp)+"px";
                     }
                     else
                     {
                        numtemp+=offLength;
                     }
              }
              else//已选
              {
                 Lantern.navyCtr[j][1]=onLength;
              }
        }
        if(isIE())
        document.getElementById("lanternPoint").style.left=(document.getElementById("LanternN0").offsetLeft+10)+"px";
        else
        document.getElementById("lanternPoint").style.left=(document.getElementById("LanternN0").offsetLeft-document.getElementById("lantern").offsetLeft+10)+"px";
        document.getElementById("LanternImg0").style.display ="";
        document.getElementById("LanternImg0").style.left ="0px";

        //图片按timeOut_time轮显
        Lantern.otimeOut=setTimeout("Lantern.cycLantern()",Lantern.timeOut_time);
    },

    //显示某一帧的图片和下方标识
    setNavy:function(i){
        if(i==Lantern.info.length-1)
             document.getElementById("lanternNavy").style.backgroundColor ="#CC3300";
        else
             document.getElementById("lanternNavy").style.backgroundColor ="#BBBBBB";
        document.getElementById("lanternNc"+i).style.display ="";
        if(i==0)
        {
            document.getElementById("LanternN"+i).className ="div_on1";
        }
        else if(i==Lantern.info.length-1)
        {
            document.getElementById("LanternN"+i).className ="div_on3";
        }
        else
        {
            document.getElementById("LanternN"+i).className ="div_on2";
        }
        document.getElementById("LanternN"+i).style.width=null;
        var onLength,offLength
        onLength=document.getElementById("LanternN"+i).offsetWidth
        offLength=(Lantern.width-onLength)/(Lantern.info.length-1)
        var numtemp=0;
        for(var j=0;j<Lantern.info.length;j++)
        {
              Lantern.navyCtr[j][0]=Lantern.navyCtr[j][1];
              if(i!=j)//未选
              {
                     Lantern.navyCtr[j][1]=offLength;
                     document.getElementById("lanternNc"+j).style.display ="none";
                       if(j==Lantern.info.length-1)
                        {
                            document.getElementById("LanternN"+j).className ="div_off3";
                        }
                        else
                        {
                            document.getElementById("LanternN"+j).className ="div_off2";
                        }
                     if(j==Lantern.info.length-1)
                     {
                        document.getElementById("LanternN"+j).style.width=(Lantern.width-onLength-numtemp)+"px";
                     }
                     else
                     {
                        numtemp+=offLength
                     }
                     document.getElementById("LanternN"+j).style.width=Lantern.navyCtr[j][0]+"px";
              Lantern.navyCtr[j][2]=(Lantern.navyCtr[j][1]-Lantern.navyCtr[j][0])/Lantern.navyTime ;
              }
              else//已选
              {
                 Lantern.navyCtr[j][1]=onLength-34;
                 document.getElementById("LanternN"+j).style.width=(Lantern.navyCtr[j][0]-34)+"px";
              Lantern.navyCtr[j][2]=(Lantern.navyCtr[j][1]-Lantern.navyCtr[j][0])/Lantern.navyTime ;

              }
        }
        document.getElementById("LanternImg"+i).style.display ="";
        if(Lantern.onChange)
        {
                document.getElementById("LanternN"+i).onclick=function(){window.open(Lantern.info[this.name][2]);};
                document.getElementById("LanternN"+Lantern.showNum).onclick=function(){if(!Lantern.onChange){Lantern.onChange=true;Lantern.setNavy(this.name);}};
                document.getElementById("LanternImg"+i).style.zIndex=0;
                document.getElementById("LanternImg"+Lantern.showNum).style.zIndex=-1;
                Lantern.oInterval=setInterval('Lantern.changeLantern('+i+')',10);
        }
    },

    imgMoveOver:false,
    navyMoveOver:false,
     changeLantern:function(i){
            if(Lantern.otimeOut!=null)
                clearTimeout(Lantern.otimeOut)
             //move
             if(!Lantern.navyMoveOver)
                Lantern.moveNavy(i);
             if(!Lantern.imgMoveOver)
             {
                Lantern.moveImg(i);
             }
             else
             {
                Lantern.flashImg(i);
             }
    },

    //幻灯片下方 1 店庆第二波，20万种图书低至59折封顶！ 2 3 4 移动的控制
     moveNavy:function(select){
            var breaktime=0;
            for(var i=0;i<Lantern.info.length;i++)
            {
                  if((Lantern.navyCtr[i][2]>0&&document.getElementById("LanternN"+i).offsetWidth<Lantern.navyCtr[i][1])||(Lantern.navyCtr[i][2]<0&&document.getElementById("LanternN"+i).offsetWidth>Lantern.navyCtr[i][1]))
                  {
                       if(i==select)
                       {
                            document.getElementById("LanternN"+i).style.width=(document.getElementById("LanternN"+i).offsetWidth+Lantern.navyCtr[i][2]-34)+"px";
                       }
                       else
                       {
                            document.getElementById("LanternN"+i).style.width=(document.getElementById("LanternN"+i).offsetWidth+Lantern.navyCtr[i][2])+"px";
                       }

                  }
                  else
                  {
                      if(i==select)
                      {
                           for(var j=0;j<Lantern.info.length;j++)
                           {
                                document.getElementById("LanternN"+j).style.width=Lantern.navyCtr[j][1]+"px";
                           }
                           if(isIE())
                                document.getElementById("lanternPoint").style.left=(document.getElementById("LanternN"+select).offsetLeft+10)+"px";
                           else
                                document.getElementById("lanternPoint").style.left=(document.getElementById("LanternN"+select).offsetLeft-document.getElementById("lantern").offsetLeft+10)+"px";
                           Lantern.navyMoveOver=true;
                           break;
                  }
              }
               if(i==select)
               {

                   if(isIE())
                        document.getElementById("lanternPoint").style.left=(document.getElementById("LanternN"+select).offsetLeft+10)+"px";
                   else
                        document.getElementById("lanternPoint").style.left=(document.getElementById("LanternN"+select).offsetLeft-document.getElementById("lantern").offsetLeft+10)+"px";
               }
            }
    },

    //图片按picMoveSpeed左移的控制
     moveImg:function(i){
            if(document.getElementById("LanternImg"+i).offsetLeft>0)
            {
               document.getElementById("LanternImg"+i).style.left=(document.getElementById("LanternImg"+i).offsetLeft-Lantern.picMoveSpeed)+"px";
            }
            else
            {
                document.getElementById("LanternImg"+i).style.left="0px";
                document.getElementById("LanternImg"+Lantern.showNum).style.left=Lantern.width+"px";
                Lantern.imgMoveOver=true;
            }
    },

      flashImg:function(i){
             document.getElementById("LanternImg"+i).style.opacity="100";
                    Lantern.showNum=i;
                    Lantern.imgMoveOver=false;
                    Lantern.navyMoveOver=false;
                    Lantern.opacityNum=101;
                    Lantern.cycNum=i;
                    clearInterval(Lantern.oInterval);
                    Lantern.otimeOut=setTimeout("Lantern.otimeOut=Lantern.cycLantern()",Lantern.timeOut_time);
                    Lantern.onChange=false;
    },

    cycLantern:function(){
        if(!Lantern.onChange)
        {
            Lantern.onChange=true;
            if(Lantern.cycNum==Lantern.info.length-1)
                Lantern.cycNum=0;
            else
                Lantern.cycNum++;
           Lantern.setNavy(Lantern.cycNum)
        }
    }

}
</script>
</head>
<body id="body1">
<div id="lantern" >
<div id="lanternMain" >
      <div id="lanternImg">
          <div style="position:absolute; width:426px; border-bottom:1px solid #FFFFFF; height:2px; top:221px; z-index:100;">
            <img id="lanternPoint" style="position:absolute;" src="/images/lanternpoint.gif"/>
          </div>
    </div>
</div>
<div id="lanternNavy"></div>
<script type="text/javascript">
Lanterninfo=new Array();   Lanterninfo=[       ['http://img3.dangdang.com/default/book_dq_lxq081118.jpg','店庆第二波，20万种图书低至59折封顶！','http://book.dangdang.com'],['http://img3.dangdang.com/default/store_dq_lxq081118.jpg','店庆第二波，专场百货网上最低价！','http://static.dangdang.com/topic/744/20081114/10896.shtml'],['http://img3.dangdang.com/default/button_jdx1121_7.jpg','运动休闲馆开业，20大国际品牌入住，名品特惠！','http://category.dangdang.com/sports'],['http://img3.dangdang.com/default/dqd_jj081106_a_1.jpg','明朝那些事儿6 全国独家现货发售','http://static.dangdang.com/book/topic/778_10819.shtml']];
   Lantern.info=Lanterninfo;
   Lantern.init();
</script>
</div>
</body>
</html>

posted on 2008-11-30 22:00 湛然常寂阅读(822) 评论(0) 编辑收藏举报

刷新页面返回顶部