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); }

 

演示地址http://www.930golf.cn/h/hotel_info.asp?hotelid=408

 

以上代码基于jquery

 

有问题加我QQ 815762641

 

本人可代写JS