提取当当网中的幻灯片javascript代码成功!~

下面把代码贴出来,想用的友友拿去用吧~ 现在流行拿来主义哒,资源共享

 

封装好的 show.js 文件:

  1. //ff支持
  2. function isIE(){ //ie? 
  3.    if (window.navigator.userAgent.toLowerCase().indexOf("msie")>=1) 
  4.     return true
  5.    else 
  6.     return false
  7. var Lantern={
  8.     onChange:[],
  9.     oInterval:[],
  10.     otimeOut:[],
  11.     opacityNum:101,
  12.     cycNum:0,
  13.     showNum:0,
  14.     width:426,//整体宽度
  15.     navyCtr:[],//2维:  0.原长 1.目标长 2.speed 
  16.     navyTime:10,//navy动画时间
  17.     picMoveSpeed:22,//图片移动速度
  18.     timeOut_time:7000,//停滞时间
  19.     info ://0.图片url 1.名称 2.链接地址 
  20.     [],
  21.     
  22.     init: function(){
  23.         Lantern.onChange=false;
  24.         for(var i=0;i<Lantern.info.length;i++){
  25.             var picDiv
  26.             var picTemp
  27.             picDiv=document.createElement('div');
  28.             picTemp=document.createElement('img');
  29.             picDiv.id ="LanternImg"+i;
  30.             picDiv.name=i;
  31.             picTemp.src = Lantern.info[i][0];
  32.             picTemp.style.width = "426px";
  33.             picDiv.style.position ="absolute";
  34.             picDiv.style.left =Lantern.width+"px";
  35.             picDiv.οnclick=function(){window.open(Lantern.info[this.name][2]);};
  36.             picDiv.appendChild(picTemp);
  37.             document.getElementById("lanternImg").appendChild(picDiv);
  38.             var divTemp
  39.             divTemp=document.createElement('div');
  40.             divTemp.id ="LanternN"+i;
  41.             divTemp.name=i;
  42.             divTemp.innerHTML="<strong>"+(i+1)+"</strong><span id=/"lanternNc"+i+"/" style=/"display:none/"> "+Lantern.info[i][1]+"</span>";
  43.             if(i==0){
  44.                divTemp.className ="div_off1";
  45.             }else if(i==Lantern.info.length-1){
  46.                 divTemp.className ="div_off3";
  47.             }else{
  48.                 divTemp.className ="div_off2";
  49.             }
  50.             //divTemp.className="div_off";
  51.             if(i==0)
  52.                 divTemp.οnclick=function(){window.open(Lantern.info[this.name][2]);};
  53.             else
  54.                 divTemp.οnclick=function(){if(!Lantern.onChange){Lantern.onChange=true;Lantern.setNavy(this.name);}};
  55.             document.getElementById("lanternNavy").appendChild(divTemp);
  56.         }
  57.         Lantern.initNany();
  58.     },
  59.     
  60.     initNany:function(){
  61.         navyCtr=new Array();
  62.         for(var k=0;k<Lantern.info.length;k++)
  63.             Lantern.navyCtr[k]=[];
  64.         document.getElementById("lanternNc0").style.display ="";
  65.         document.getElementById("LanternN0").className ="div_on1";
  66.         var onLength,offLength
  67.         onLength=document.getElementById("LanternN0").offsetWidth
  68.         offLength=(Lantern.width-onLength)/(Lantern.info.length-1)
  69.         var numtemp=0;
  70.         for(var j=0;j<Lantern.info.length;j++){
  71.               if(j!=0){//未选
  72.                 Lantern.navyCtr[j][1]=offLength;
  73.                 document.getElementById("lanternNc"+j).style.display ="none";
  74.                 if(j==Lantern.info.length-1){
  75.                    document.getElementById("LanternN"+j).className ="div_off3";
  76.                 }else{
  77.                    document.getElementById("LanternN"+j).className ="div_off2";
  78.                 }
  79.                 document.getElementById("LanternN"+j).style.width=offLength+"px";
  80.                 if(j==Lantern.info.length-1){
  81.                   document.getElementById("LanternN"+j).style.width=(Lantern.width-onLength-numtemp)+"px";  
  82.                 }else{
  83.                   numtemp+=offLength;
  84.                 }
  85.               }else{//已选
  86.                  Lantern.navyCtr[j][1]=onLength;
  87.               }
  88.         }
  89.         if(isIE())
  90.             document.getElementById("lanternPoint").style.left=(document.getElementById("LanternN0").offsetLeft+10)+"px";
  91.         else
  92.             document.getElementById("lanternPoint").style.left=(document.getElementById("LanternN0").offsetLeft-document.getElementById("lantern").offsetLeft+10)+"px";
  93.         document.getElementById("LanternImg0").style.display ="";
  94.         document.getElementById("LanternImg0").style.left ="0px";
  95.         Lantern.otimeOut=setTimeout("Lantern.cycLantern()",Lantern.timeOut_time);
  96.     },
  97.     
  98.     setNavy:function(i){
  99.         if(i==Lantern.info.length-1)
  100.              document.getElementById("lanternNavy").style.backgroundColor ="#CC3300";
  101.         else
  102.              document.getElementById("lanternNavy").style.backgroundColor ="#BBBBBB";
  103.         document.getElementById("lanternNc"+i).style.display ="";
  104.         if(i==0){
  105.             document.getElementById("LanternN"+i).className ="div_on1";
  106.         }else if(i==Lantern.info.length-1){
  107.             document.getElementById("LanternN"+i).className ="div_on3";
  108.         }else{
  109.             document.getElementById("LanternN"+i).className ="div_on2";
  110.         }
  111.         //document.getElementById("LanternN"+i).className ="div_on";
  112.         document.getElementById("LanternN"+i).style.width=null;
  113.         var onLength,offLength
  114.         onLength=document.getElementById("LanternN"+i).offsetWidth
  115.         offLength=(Lantern.width-onLength)/(Lantern.info.length-1)
  116.         var numtemp=0;
  117.         for(var j=0;j<Lantern.info.length;j++){
  118.               Lantern.navyCtr[j][0]=Lantern.navyCtr[j][1];
  119.               if(i!=j){//未选
  120.                 Lantern.navyCtr[j][1]=offLength;
  121.                 document.getElementById("lanternNc"+j).style.display ="none";
  122.                 if(j==Lantern.info.length-1){
  123.                     document.getElementById("LanternN"+j).className ="div_off3";
  124.                 }else{
  125.                   document.getElementById("LanternN"+j).className ="div_off2";
  126.                 }
  127.                 if(j==Lantern.info.length-1) {
  128.                    document.getElementById("LanternN"+j).style.width=(Lantern.width-onLength-numtemp)+"px";
  129.                 }else{
  130.                    numtemp+=offLength
  131.                 }
  132.                 document.getElementById("LanternN"+j).style.width=Lantern.navyCtr[j][0]+"px";
  133.                 Lantern.navyCtr[j][2]=(Lantern.navyCtr[j][1]-Lantern.navyCtr[j][0])/Lantern.navyTime ;
  134.               }else{//已选
  135.                 Lantern.navyCtr[j][1]=onLength-34;
  136.                 document.getElementById("LanternN"+j).style.width=(Lantern.navyCtr[j][0]-34)+"px";
  137.                 Lantern.navyCtr[j][2]=(Lantern.navyCtr[j][1]-Lantern.navyCtr[j][0])/Lantern.navyTime ;
  138.               }
  139.         }
  140.         document.getElementById("LanternImg"+i).style.display ="";
  141.         if(Lantern.onChange){
  142.            document.getElementById("LanternN"+i).οnclick=function(){window.open(Lantern.info[this.name][2]);};
  143.            document.getElementById("LanternN"+Lantern.showNum).οnclick=function(){
  144.                 if(!Lantern.onChange){
  145.                 Lantern.onChange=true;Lantern.setNavy(this.name);
  146.                 }
  147.            };
  148.            document.getElementById("LanternImg"+i).style.zIndex=0;
  149.            document.getElementById("LanternImg"+Lantern.showNum).style.zIndex=-1;
  150.            Lantern.oInterval=setInterval('Lantern.changeLantern('+i+')',10);
  151.         }
  152.     },
  153.     
  154.     imgMoveOver:false,
  155.     navyMoveOver:false,
  156.      changeLantern:function(i){
  157.             if(Lantern.otimeOut!=null)
  158.                 clearTimeout(Lantern.otimeOut)
  159.             //移动
  160.             if(!Lantern.navyMoveOver)
  161.                 Lantern.moveNavy(i);
  162.             if(!Lantern.imgMoveOver){
  163.                 Lantern.moveImg(i);
  164.             }else{
  165.               Lantern.flashImg(i);
  166.             }
  167.     },
  168.     
  169.     moveNavy:function(select){
  170.        var breaktime=0;
  171.        for(var i=0;i<Lantern.info.length;i++){
  172.           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])){
  173.                 if(i==select){
  174.                   document.getElementById("LanternN"+i).style.width=(document.getElementById("LanternN"+i).offsetWidth+Lantern.navyCtr[i][2]-34)+"px";  
  175.                 }else{
  176.                   document.getElementById("LanternN"+i).style.width=(document.getElementById("LanternN"+i).offsetWidth+Lantern.navyCtr[i][2])+"px";  
  177.                 }
  178.           }else{
  179.              if(i==select){
  180.                 for(var j=0;j<Lantern.info.length;j++){
  181.                     document.getElementById("LanternN"+j).style.width=Lantern.navyCtr[j][1]+"px"
  182.                 }
  183.                 if(isIE())
  184.                    document.getElementById("lanternPoint").style.left=(document.getElementById("LanternN"+select).offsetLeft+10)+"px";
  185.                 else
  186.                    document.getElementById("lanternPoint").style.left=(document.getElementById("LanternN"+select).offsetLeft-document.getElementById("lantern").offsetLeft+10)+"px";
  187.                 Lantern.navyMoveOver=true;
  188.                 break;
  189.              }
  190.           }
  191.           if(i==select){
  192.               if(isIE())
  193.                   document.getElementById("lanternPoint").style.left=(document.getElementById("LanternN"+select).offsetLeft+10)+"px";
  194.                else
  195.                 document.getElementById("lanternPoint").style.left=(document.getElementById("LanternN"+select).offsetLeft-document.getElementById("lantern").offsetLeft+10)+"px";
  196.                }
  197.          }
  198.     },
  199.     
  200.      moveImg:function(i){
  201.             if(document.getElementById("LanternImg"+i).offsetLeft>0){
  202.                document.getElementById("LanternImg"+i).style.left=(document.getElementById("LanternImg"+i).offsetLeft-Lantern.picMoveSpeed)+"px";
  203.             }else{
  204.                 document.getElementById("LanternImg"+i).style.left="0px";
  205.                 document.getElementById("LanternImg"+Lantern.showNum).style.left=Lantern.width+"px";
  206.                 Lantern.imgMoveOver=true;
  207.             }
  208.     },
  209.     
  210.       flashImg:function(i){
  211.              document.getElementById("LanternImg"+i).style.opacity="100"
  212.              Lantern.showNum=i;
  213.              Lantern.imgMoveOver=false;
  214.              Lantern.navyMoveOver=false;
  215.              Lantern.opacityNum=101;
  216.              Lantern.cycNum=i;
  217.              clearInterval(Lantern.oInterval);
  218.              Lantern.otimeOut=setTimeout("Lantern.otimeOut=Lantern.cycLantern()",Lantern.timeOut_time);
  219.              Lantern.onChange=false;
  220.     },
  221.       
  222.     cycLantern:function(){
  223.         if(!Lantern.onChange){
  224.             Lantern.onChange=true;
  225.             if(Lantern.cycNum==Lantern.info.length-1)
  226.                 Lantern.cycNum=0;
  227.             else
  228.                 Lantern.cycNum++;
  229.            Lantern.setNavy(Lantern.cycNum)
  230.         }
  231.     }
  232. }

封装好的style.css      CSS样式表:

  1. BODY {
  2.     PADDING-RIGHT: 0px
  3.     PADDING-LEFT: 0px
  4.     FONT-SIZE: 12px
  5.     BACKGROUND: #e2e2e2
  6.     PADDING-BOTTOM: 0px
  7.     MARGIN: 0px
  8.     CURSOR: default
  9.     COLOR: #666
  10.     WORD-BREAK: break-all
  11.     LINE-HEIGHT: 20px
  12.     PADDING-TOP: 0px
  13.     FONT-FAMILY: 宋体,Arial,Helvetica,sans-serif
  14.     TEXT-ALIGN: center
  15. }
  16. DIV {
  17.     PADDING-RIGHT: 0px
  18.     PADDING-LEFT: 0px
  19.     PADDING-BOTTOM: 0px
  20.     MARGIN: 0px
  21.     PADDING-TOP: 0px
  22.     TEXT-ALIGN: left
  23. }
  24. #lantern {
  25.     BORDER-RIGHT: #ffffff 1px solid
  26.     BORDER-TOP: #ffffff 1px solid
  27.     OVERFLOW: hidden
  28.     BORDER-LEFT: #ffffff 1px solid
  29.     WIDTH: 426px
  30.     CURSOR: pointer
  31.     BORDER-BOTTOM: #ffffff 1px solid
  32.     HEIGHT: 240px
  33. }
  34. #lanternMain {
  35.     WIDTH: 426px
  36.     HEIGHT: 224px
  37.     BACKGROUND-COLOR: #ffffff
  38. }
  39. #lanternNavy {
  40.     FONT-SIZE: 12px
  41.     FLOAT: left
  42.     OVERFLOW: hidden
  43.     WIDTH: 1000px
  44.     COLOR: #ffffff
  45.     HEIGHT: 16px
  46.     TEXT-ALIGN: center
  47. }
  48. #lanternNavy .div_off1 {
  49.     FLOAT: left
  50.     BORDER-LEFT: #ffcc00 0px solid
  51.     BORDER-BOTTOM: #ffffff 1px solid
  52.     HEIGHT: 16px
  53.     BACKGROUND-COLOR: #bbbbbb
  54.     TEXT-ALIGN: center
  55. }
  56. #lanternNavy .div_on1 {
  57.     PADDING-RIGHT: 24px
  58.     PADDING-LEFT: 10px
  59.     FLOAT: left
  60.     BORDER-LEFT: #ffcc00 0px solid
  61.     BORDER-BOTTOM: #ffffff 1px solid
  62.     HEIGHT: 16px
  63.     BACKGROUND-COLOR: #cc3300
  64. }
  65. #lanternNavy .div_off2 {
  66.     FLOAT: left
  67.     BORDER-LEFT: #ffcc00 1px solid
  68.     BORDER-BOTTOM: #ffffff 1px solid
  69.     HEIGHT: 16px
  70.     BACKGROUND-COLOR: #bbbbbb
  71.     TEXT-ALIGN: center
  72. }
  73. #lanternNavy .div_on2 {
  74.     PADDING-RIGHT: 24px
  75.     PADDING-LEFT: 10px
  76.     FLOAT: left
  77.     BORDER-LEFT: #ffcc00 1px solid
  78.     BORDER-BOTTOM: #ffffff 1px solid
  79.     HEIGHT: 16px
  80.     BACKGROUND-COLOR: #cc3300
  81. }
  82. #lanternNavy .div_off3 {
  83.     BORDER-RIGHT: #ffcc00 2px solid
  84.     FLOAT: left
  85.     BORDER-LEFT: #ffcc00 1px solid
  86.     BORDER-BOTTOM: #ffffff 1px solid
  87.     HEIGHT: 16px
  88.     BACKGROUND-COLOR: #bbbbbb
  89.     TEXT-ALIGN: center
  90. }
  91. #lanternNavy .div_on3 {
  92.     BORDER-RIGHT: #ffcc00 2px solid
  93.     PADDING-RIGHT: 24px
  94.     PADDING-LEFT: 10px
  95.     FLOAT: left
  96.     BORDER-LEFT: #ffcc00 1px solid
  97.     BORDER-BOTTOM: #ffffff 1px solid
  98.     HEIGHT: 16px
  99.     BACKGROUND-COLOR: #cc3300
  100. }
  101. #lanternImg {
  102.     OVERFLOW: hidden
  103.     WIDTH: 426px
  104.     POSITION: absolute
  105.     HEIGHT: 224px
  106. }

 

页面文件:

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"><!--这段代码必须要有-->
  2. <HTML>
  3.     <HEAD>
  4.         <LINK href="style.css" type=text/css rel=stylesheet>
  5.         <SCRIPT src="show.js" type=text/javascript></SCRIPT>
  6.     </HEAD>
  7.     
  8.     <BODY id=body1>
  9.         <DIV id=lantern>
  10.             <DIV id=lanternMain>
  11.                 <DIV id=lanternImg>
  12.                     <DIV style="Z-INDEX: 100; WIDTH: 426px; BORDER-BOTTOM: #ffffff 1px solid; POSITION: absolute; TOP: 221px; HEIGHT: 2px">
  13.                         <IMG id=lanternPoint style="POSITION: absolute" src="point.gif"><!--这里的图片是小标签指向图片的小三角形脚标,不要也罢,但是不好看--> 
  14.                     </DIV>
  15.                 </DIV>
  16.             </DIV>
  17.             <DIV id=lanternNavy></DIV>
  18.             <SCRIPT type=text/javascript>
  19.                 Lantern.info=new Array();
  20.                 Lantern.info=[['E:/01.png','测试1','#'],['E:/19.png','测试2','#'],['E:/41.png','测试3','#'],['E:/1.png','测试4','#'],['E:/2.png','测试5','#']];
  21.                 Lantern.init();
  22.             </SCRIPT>
  23.         </DIV>
  24.     </BODY>
  25. </HTML>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值