原生JS如何实现带缓动效果的图片
短信预约 -IT技能 免费直播动态提醒
这篇文章给大家分享的是有关原生JS如何实现带缓动效果的图片的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
HTML部分：
<div id="J-Slide"> <ul class="JSlide-list"> <li><img class="lazy" data-src="http://images.cnblogs.com/cnblogs_com/artwl/357654/o_01.jpg" alt=""/></li> <li><img class="lazy" data-src="http://images.cnblogs.com/cnblogs_com/artwl/357654/o_02.jpg" alt=""/></li> <li><img class="lazy" data-src="http://images.cnblogs.com/cnblogs_com/artwl/357654/o_03.jpg" alt=""/></li> <li><img class="lazy" data-src="http://images.cnblogs.com/cnblogs_com/artwl/357654/o_04.jpg" alt=""/></li> <li><img class="lazy" data-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 class="lazy" data-src="http://images.cnblogs.com/cnblogs_com/artwl/357654/o_01.jpg" alt=""/></li> <li><img class="lazy" data-src="http://images.cnblogs.com/cnblogs_com/artwl/357654/o_02.jpg" alt=""/></li> <li><img class="lazy" data-src="http://images.cnblogs.com/cnblogs_com/artwl/357654/o_03.jpg" alt=""/></li> <li><img class="lazy" data-src="http://images.cnblogs.com/cnblogs_com/artwl/357654/o_04.jpg" alt=""/></li> <li><img class="lazy" data-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如何实现带缓动效果的图片”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
