1         
2
         
3
         
4
         
5
          

這部分比較簡單，跟Tmall首頁效果一樣，幾張圖片，左下角是圖片索引，并有一個(gè)半透明的遮罩層。

CSS部分：

body,ul,li{      margin:0;      padding:0;  }  ul{      list-style:none;  }  #J-Slide{      width:600px;      height:400px;      position:relative;      margin:50px auto;      overflow:hidden;  }  #J-Slide .JSlide-list{      position:absolute;      width:3000px;      left:0;      top:0;  }  #J-Slide .JSlide-list li{      float:left;  }  #J-Slide .JSlide-list li img{      width:600px;      height:400px;  }  #J-Slide .JSlide-num{      position:absolute;      left:0;      bottom:0;      height:30px;      padding:5px;      width:100%;      z-index:10;  }  #J-Slide .JSlide-num li{      width:30px;      height:30px;      margin-left:10px;      float:left;      font-size:16px;      color:white;      background:#716584;      line-height:30px;      text-align:center;      cursor:pointer;      border-radius:15px;  }  #J-Slide .JSlide-mask{      position:absolute;      left:0;      background:black;      bottom:0;      width:100%;      height:40px;      opacity:0.3;      filter:Alpha(opacity = 30);      z-index:1;  }  #J-Slide .JSlide-num .current{      background:#B91919;  }

CSS部分比較簡單，直接用absolute定位。

JavaScript庫部分：

(function(){      /*      *參數(shù)說明:      *id 必須      *picwidth 可選      *speed 可選      *      *作者:artwl      *出處:http://artwl.cnblogs.com      */     var JCP_Slide=function(id,picwidth,speed){          if(!(this instanceof JCP_Slide))              return new JCP_Slide(id,picwidth,speed);          var obj=document.getElementById(id),              childs=obj.getElementsByTagName("ul");          this.author="artwl";          this.jslideList=childs[0];          this.jslideNums=childs[1].children;          this.speed= speed || 5000;          this.picwidth= picwidth || (obj.currentStyle ? parseFloat(obj.currentStyle.width) : parseFloat(document.defaultView.getComputedStyle(obj,null).width));          this.currentIndex=0;          this.distance=this.picwidth;          this.currentLeftPos=0;          this.runHandle=null;          this.len=this.jslideNums.length;      }       JCP_Slide.prototype={          bindMouse:function(){              var self=this;              for(var i=0;i
這個(gè)JS庫是核心，入口有三個(gè)參數(shù)，***個(gè)是最外層的div的id（必須），第二個(gè)參數(shù)是圖片寬度（可選），默認(rèn)為最外層DIV寬度，第三個(gè)參數(shù)為自動切換的時(shí)間間隔（可選），默認(rèn)為5秒。
bindMouse是綁定鼠標(biāo)的懸浮和移出事件，autoRun是讓圖片正動切換，play方法調(diào)用了這兩個(gè)方法。
easeOutCirc是一個(gè)先快后慢的緩動公式，transition是緩動函數(shù)，這兩個(gè)方法的用法請參考司徒正美的博客：
調(diào)用示例：
window.onload=function(){      JCP_Slide("J-Slide").play();  };
完整代碼為：
View Code                              body,ul,li{              margin:0;              padding:0;          }          ul{              list-style:none;          }          #J-Slide{              width:600px;              height:400px;              position:relative;              margin:50px auto;              overflow:hidden;          }          #J-Slide .JSlide-list{              position:absolute;              width:3000px;              left:0;              top:0;          }          #J-Slide .JSlide-list li{              float:left;          }          #J-Slide .JSlide-list li img{              width:600px;              height:400px;          }          #J-Slide .JSlide-num{              position:absolute;              left:0;              bottom:0;              height:30px;              padding:5px;              width:100%;              z-index:10;          }          #J-Slide .JSlide-num li{              width:30px;              height:30px;              margin-left:10px;              float:left;              font-size:16px;              color:white;              background:#716584;              line-height:30px;              text-align:center;              cursor:pointer;              border-radius:15px;          }          #J-Slide .JSlide-mask{              position:absolute;              left:0;              background:black;              bottom:0;              width:100%;              height:40px;              opacity:0.3;              filter:Alpha(opacity = 30);              z-index:1;          }          #J-Slide .JSlide-num .current{              background:#B91919;          }                            
         
         
         
         
                   1         
2
         
3
         
4
         
5