朋友让帮忙找个原生JS写的带缓动效果的图片幻灯，类似Tmall首页的效果，找了一圈后发现网上JS写的图片幻灯很多，相关的jQuery插件也很多，但用原生JS写的带缓动效果的却不多。没办法只好自己动手，现在把代码分享给大家，希望对大家有用。

　　代码中的缓动公式用了司徒正美博客中整理的代码：

　　缓动公式的推导主要利用了物理中的加速度知识，推荐过程可以看看这篇文章：

　　HTML部分：

     
    
      
        
       
        
       
        
       
        
       
        
       
    
      
    
      
        
       
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.οnlοad=function(){    JCP_Slide("J-Slide").play();};

　　完整代码为：

    
                  
      
    
       
        
        
        
        
        
        
        
        
        
        
    
       
    
       
        
        
1
        
        
2
        
        
3
        
        
4
        
        
5
    
       
    
       
      

　　运行效果：

• 
• 
• 
• 
• 

• 1
• 2
• 3
• 4
• 5