现在用JQUERY作了个很简单的图片切换,
$(function(){
$("#img1").mouseover(function(){//id="img1"的是缩略图,4张,分别为img1\2\3\4
$("#pp").animate({ opacity: "0.6"}, 100);//id="pp"的是大图
$("#pp").attr("src",$(this).attr("src"));//实现鼠标滑到哪张图片,大图显示该图片
$("#pp").animate({ opacity: "1"}, 1000);//闪动,不能不要
});$("#img2").mouseover(function(){
$("#pp").animate({ opacity: "0.6"}, 100);
$("#pp").attr("src",$(this).attr("src"));
$("#pp").animate({ opacity: "1"}, 1000);
});$("#img3").mouseover(function(){
$("#pp").animate({ opacity: "0.6"}, 100);
$("#pp").attr("src",$(this).attr("src"));
$("#pp").animate({ opacity: "1"}, 1000);
});$("#img4").mouseover(function(){
$("#pp").animate({ opacity: "0.6"}, 100);
$("#pp").attr("src",$(this).attr("src"));
$("#pp").animate({ opacity: "1"}, 1000);
});
})功能是实现了 但是当连续划过缩略图时,大图src变换完毕,但大图还是在一闪一闪,问下怎么去做判断,结束上一个动作或者等待上一个动作完成后启动下一个动作?
$(function(){
$("#img1").mouseover(function(){//id="img1"的是缩略图,4张,分别为img1\2\3\4
$("#pp").animate({ opacity: "0.6"}, 100);//id="pp"的是大图
$("#pp").attr("src",$(this).attr("src"));//实现鼠标滑到哪张图片,大图显示该图片
$("#pp").animate({ opacity: "1"}, 1000);//闪动,不能不要
});$("#img2").mouseover(function(){
$("#pp").animate({ opacity: "0.6"}, 100);
$("#pp").attr("src",$(this).attr("src"));
$("#pp").animate({ opacity: "1"}, 1000);
});$("#img3").mouseover(function(){
$("#pp").animate({ opacity: "0.6"}, 100);
$("#pp").attr("src",$(this).attr("src"));
$("#pp").animate({ opacity: "1"}, 1000);
});$("#img4").mouseover(function(){
$("#pp").animate({ opacity: "0.6"}, 100);
$("#pp").attr("src",$(this).attr("src"));
$("#pp").animate({ opacity: "1"}, 1000);
});
})功能是实现了 但是当连续划过缩略图时,大图src变换完毕,但大图还是在一闪一闪,问下怎么去做判断,结束上一个动作或者等待上一个动作完成后启动下一个动作?
new code
$(function(){
var a=0;
$("#img1").mouseover(function(){if(a==0){a=1;
$("#pp").animate({ opacity: "0"}, 1000).animate({src:$(this).attr("src")}).animate({ opacity: "1"}, 100);a=0;}
});$("#img2").mouseover(function(){
if(a==0){a=1;
$("#pp").animate({ opacity: "0"}, 1000).animate({src:$(this).attr("src")}).animate({ opacity: "1"}, 100);a=0;}
});$("#img3").mouseover(function(){
if(a==0){a=1;
$("#pp").animate({ opacity: "0"}, 1000).animate({src:$(this).attr("src")}).animate({ opacity: "1"}, 100);a=0;}
});$("#img4").mouseover(function(){
if(a==0){a=1;
$("#pp").animate({ opacity: "0"}, 1000).animate({src:$(this).attr("src")}).animate({ opacity: "1"}, 100);a=0;}
});
})用a去做判断,无效 = = 5555555555555555
$(function(){
$('#img1,#img2,#img3,#img4').mouseover(function(){
//sotp是停止所有动画
$("#pp").stop().animate({ opacity: "0.6"}, 100);//id="pp"的是大图
$("#pp").attr("src",$(this).attr("src"));//实现鼠标滑到哪张图片,大图显示该图片
$("#pp").animate({ opacity: "1"}, 1000);//闪动,不能不要
});
})
会停掉所有动画不需要参数