js最简单的图片切换效果实现

// JavaScript Document
//基本的图片切换效果。在父元素中加上id="#main_pic_show";
var inx=0;
function flash(){
var length=$("#main_pic_show").find("img").length-1;//获取图片的数量从0开始
var index=new Array()
/*初始化图片索引数组
比如图片数组为
0 1 2 3 4
则索引数组为
3 4 0 1 2
当图片显示时，当前图片+2准备
防止闪烁
*/
for (var i=2;i<=length+2;i++)
index[i]=i-2;
for (var i=0;i<2;i++)
index[i]=length-1+i;
var a;
var delay=4000
a=Math.round(Math.random()*3);//4种效果。0 1 2 3
switch(a){
case 0:$("#main_pic_show").find("img:eq("+inx+")").fadeIn(1200);break;//淡入
case 1:$("#main_pic_show").find("img:eq("+inx+")").slideDown(1200);break;//滑下
case 2:{
//右滑入
$("#main_pic_show").find("img:eq("+inx+")").css('display','block');
$("#main_pic_show").find("img:eq("+inx+")").css('left',-$("#main_pic_show").find("img:first").width());
$("#main_pic_show").find("img:eq("+inx+")").animate({left: 0}, 1200);
};break;
case 3:{
//左滑入
$("#main_pic_show").find("img:eq("+inx+")").css('display','block');
$("#main_pic_show").find("img:eq("+inx+")").css('left',$("#main_pic_show").find("img:first").width());
$("#main_pic_show").find("img:eq("+inx+")").animate({left: 0}, 1200);
};break;
default:break;
}
//当最后一张时候执行淡出效果。。。
if(inx==length)
setTimeout('$("#main_pic_show").find("img:last").fadeOut(1200);',delay);
$("#main_pic_show").find("img:eq("+index[inx]+")").css('display','none');
inx++;//指向下一张图片
//当inx>图片总数的时候 inx指向第一张
if (inx>length)
inx=0;
setTimeout('flash()',delay);
}