原生JS如何实现带缓动效果的图片

              
         
         
         
         
                   1         
2
         
3
         
4
         
5
          

这部分比较简单，跟Tmall首页效果一样，几张图片，左下角是图片索引，并有一个半透明的遮罩层。

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(){      /*      *参数说明:      *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
这个JS库是核心，入口有三个参数，***个是最外层的div的id（必须），第二个参数是图片宽度（可选），默认为最外层DIV宽度，第三个参数为自动切换的时间间隔（可选），默认为5秒。
bindMouse是绑定鼠标的悬浮和移出事件，autoRun是让图片正动切换，play方法调用了这两个方法。
easeOutCirc是一个先快后慢的缓动公式，transition是缓动函数，这两个方法的用法请参考司徒正美的博客：
调用示例：
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