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

这篇文章给大家分享的是有关原生JS如何实现带缓动效果的图片的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

HTML部分：

<div id="J-Slide">     <ul class="JSlide-list">         <li><img src="http://images.cnblogs.com/cnblogs_com/artwl/357654/o_01.jpg" alt=""/></li>         <li><img src="http://images.cnblogs.com/cnblogs_com/artwl/357654/o_02.jpg" alt=""/></li>         <li><img src="http://images.cnblogs.com/cnblogs_com/artwl/357654/o_03.jpg" alt=""/></li>         <li><img src="http://images.cnblogs.com/cnblogs_com/artwl/357654/o_04.jpg" alt=""/></li>         <li><img src="http://images.cnblogs.com/cnblogs_com/artwl/357654/o_05.jpg" alt=""/></li>     </ul>     <ul class="JSlide-num">         <li class="current">1</li>         <li>2</li>         <li>3</li>         <li>4</li>         <li>5</li>     </ul>     <div class="JSlide-mask"></div> </div>

这部分比较简单，跟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(){           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<this.len;i++){                  this.jslideNums[i].onmouseover=(function(index){                      return function(){                          self.currentIndex=index;                          clearInterval(self.runHandle);                          var prev=-1;                          for(var k=0;k<self.len;k++){                              if(self.jslideNums[k].className === "current")                                  prev = k;                              self.jslideNums[k].className = k === index ? "current" : "" ;                          }                          if(prev != index){                              self.distance=(prev - index)*self.picwidth;                              self.currentLeftPos = -prev * self.picwidth;                              self.transition(self.jslideList,{field:'left',begin:self.currentLeftPos,change:self.distance,ease:self.easeOutCirc})                          }                      }                  })(i);                  this.jslideNums[i].onmouseout=function(){                      self.autoRun();                  }              }          },          autoRun:function(){              var self=this;              this.runHandle=setInterval(function(){                  self.distance=-self.picwidth;                  for(var k=0;k<self.len;k++){                      self.jslideNums[k].className = "" ;                  }                  self.currentIndex++;                  self.currentIndex%=5;                  self.jslideNums[self.currentIndex].className = "current";                  self.currentLeftPos = -(self.currentIndex-1) * self.picwidth;                  if(self.currentIndex == 0){                      self.distance = (self.len-1)*self.picwidth;                      self.currentLeftPos = -self.distance;                  }                  self.transition(self.jslideList,{field:'left',begin:self.currentLeftPos,change:self.distance,ease:self.easeOutCirc});              },self.speed);          },          easeOutCirc:function(pos){              return Math.sqrt(1 - Math.pow((pos-1), 2))          },          transition:function(el){              el.style.position = "absolute";              var options = arguments[1] || {},              begin =  options.begin,//开始位置              change = options.change,//变化量              duration = options.duration || 500,//缓动效果持续时间              field = options.field,//必须指定，基本上对top,left,width,height这个属性进行设置              ftp = options.ftp || 50,              onStart = options.onStart || function(){},              onEnd = options.onEnd || function(){},              ease = options.ease,//要使用的缓动公式              end = begin + change,//结束位置              startTime = new Date().getTime();//开始执行的时间              onStart();              (function(){                  setTimeout(function(){                      var newTime = new Date().getTime(),//当前帧开始的时间                      timestamp = newTime - startTime,//逝去时间                      delta = ease(timestamp / duration);                      el.style[field] = Math.ceil(begin + delta * change) + "px";                      if(duration <= timestamp){                          el.style[field] = end + "px";                          onEnd();                      } else {                          setTimeout(arguments.callee,1000/ftp);                      }                  },1000/ftp);              })();          },          play:function(){              this.bindMouse();              this.autoRun();          }      };       window.JCP_Slide=JCP_Slide;  })();

这个JS库是核心，入口有三个参数，***个是最外层的div的id（必须），第二个参数是图片宽度（可选），默认为最外层DIV宽度，第三个参数为自动切换的时间间隔（可选），默认为5秒。

bindMouse是绑定鼠标的悬浮和移出事件，autoRun是让图片正动切换，play方法调用了这两个方法。

easeOutCirc是一个先快后慢的缓动公式，transition是缓动函数，这两个方法的用法请参考司徒正美的博客：

调用示例：

window.onload=function(){      JCP_Slide("J-Slide").play();  };

完整代码为：

View Code    <!DOCTYPE html> <html> <head>     <meta charset="utf-8"/>     <title> New Document </title>     <style type="text/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;          }      </style>     <script>         (function(){                            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;                  thisthis.distance=this.picwidth;                  this.currentLeftPos=0;                  this.runHandle=null;                  thisthis.len=this.jslideNums.length;              }               JCP_Slide.prototype={                  bindMouse:function(){                      var self=this;                      for(var i=0;i<this.len;i++){                          this.jslideNums[i].onmouseover=(function(index){                              return function(){                                  self.currentIndex=index;                                  clearInterval(self.runHandle);                                  var prev=-1;                                  for(var k=0;k<self.len;k++){                                      if(self.jslideNums[k].className === "current")                                          prev = k;                                      self.jslideNums[k].className = k === index ? "current" : "" ;                                  }                                  if(prev != index){                                      self.distance=(prev - index)*self.picwidth;                                      self.currentLeftPos = -prev * self.picwidth;                                      self.transition(self.jslideList,{field:'left',begin:self.currentLeftPos,change:self.distance,ease:self.easeOutCirc})                                  }                              }                          })(i);                          this.jslideNums[i].onmouseout=function(){                              self.autoRun();                          }                      }                  },                  autoRun:function(){                      var self=this;                      this.runHandle=setInterval(function(){                          self.distance=-self.picwidth;                          for(var k=0;k<self.len;k++){                              self.jslideNums[k].className = "" ;                          }                          self.currentIndex++;                          self.currentIndex%=5;                          self.jslideNums[self.currentIndex].className = "current";                          self.currentLeftPos = -(self.currentIndex-1) * self.picwidth;                          if(self.currentIndex == 0){                              self.distance = (self.len-1)*self.picwidth;                              self.currentLeftPos = -self.distance;                          }                          self.transition(self.jslideList,{field:'left',begin:self.currentLeftPos,change:self.distance,ease:self.easeOutCirc});                      },self.speed);                  },                  easeOutCirc:function(pos){                      return Math.sqrt(1 - Math.pow((pos-1), 2))                  },                  transition:function(el){                      el.style.position = "absolute";                      var options = arguments[1] || {},                      begin =  options.begin,                      change = options.change,                      duration = options.duration || 500,                      field = options.field,                      ftp = options.ftp || 50,                      onStart = options.onStart || function(){},                      onEnd = options.onEnd || function(){},                      ease = options.ease,                      end = begin + change,                      startTime = new Date().getTime();                      onStart();                      (function(){                          setTimeout(function(){                              var newnewTime = new Date().getTime(),                              timestamp = newTime - startTime,                              delta = ease(timestamp / duration);                              el.style[field] = Math.ceil(begin + delta * change) + "px";                              if(duration <= timestamp){                                  el.style[field] = end + "px";                                  onEnd();                              } else {                                  setTimeout(arguments.callee,1000/ftp);                              }                          },1000/ftp);                      })();                  },                  play:function(){                      this.bindMouse();                      this.autoRun();                  }              };               window.JCP_Slide=JCP_Slide;          })();           window.onload=function(){              JCP_Slide("J-Slide").play();          };      </script> </head> <body> <div id="J-Slide">     <ul class="JSlide-list">         <li><img src="http://images.cnblogs.com/cnblogs_com/artwl/357654/o_01.jpg" alt=""/></li>         <li><img src="http://images.cnblogs.com/cnblogs_com/artwl/357654/o_02.jpg" alt=""/></li>         <li><img src="http://images.cnblogs.com/cnblogs_com/artwl/357654/o_03.jpg" alt=""/></li>         <li><img src="http://images.cnblogs.com/cnblogs_com/artwl/357654/o_04.jpg" alt=""/></li>         <li><img src="http://images.cnblogs.com/cnblogs_com/artwl/357654/o_05.jpg" alt=""/></li>     </ul>     <ul class="JSlide-num">         <li class="current">1</li>         <li>2</li>         <li>3</li>         <li>4</li>         <li>5</li>     </ul>     <div class="JSlide-mask"></div> </div> </body> </html>

运行效果：

感谢各位的阅读！关于“原生JS如何实现带缓动效果的图片”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！