分享一个用原生JavaScript写的带缓动效果的图片幻灯
朋友让帮忙找个原生JS写的带缓动效果的图片幻灯，类似Tmall首页的效果，找了一圈后发现网上JS写的图片幻灯很多，相关的jQuery插件也很多，但用原生JS写的带缓动效果的却不多。没办法只好自己动手，现在把代码分享给大家，希望对大家有用。
代码中的缓动公式用了司徒正美博客中整理的代码： http://www.cnblogs.com/rubylouvre/archive/2009/09/17/1567607.html
缓动公式的推导主要利用了物理中的加速度知识，推荐过程可以看看这篇文章： http://floatyears.info/javascript-animation-easing
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 (){
/*
*参数说明:
*id 必须
*picwidth 可选
*speed 可选
*
*作者:artwl
*出处:http://artwl.cnblogs.com
*/
var JCP_Slide= function (id,picwidth,speed){
if ( this === window)
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是缓动函数，这两个方法的用法请参考 司徒正美 的博客： http://www.cnblogs.com/rubylouvre/archive/2009/09/17/1567607.html
调用示例：
window.onload= function (){
JCP_Slide( "J-Slide" ).play();
};
完整代码为：
View Code
运行效果：
1 2 3 4 5
作者： Artwl
出处： http://artwl.cnblogs.com
本文首发博客园，版权归作者跟博客园共有。转载必须保留本段声明，并在页面显著位置给出本文链接，否则保留追究法律责任的权利。
分类: JavaScript
标签: javascript , 图片幻灯
作者： Leo_wl
出处： http://www.cnblogs.com/Leo_wl/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
版权信息查看更多关于分享一个用原生JavaScript写的带缓动效果的图片幻灯的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did48092