原生JS如何实现带缓动效果的图片
这部分比较简单，跟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 New Document 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
