所以我修改了这个 Supersized 插件。我添加了让 div 进出动画的功能。在 Firefox、Safari 和 Chrome 中,工作正常。在 IE7 及更高版本中,它并不好。有些幻灯片有动画,有些没有。有人有什么想法吗?代码片段和链接如下:
http://www.bigideaadv.com/adaptive/
if (base.options.slide_links){
// Slide marker clicked
$(vars.slide_list+'> li').click(function(){
index = $(vars.slide_list+'> li').index(this);
targetSlide = index + 1;
slide1 = index + 1; //Slide clicked
slide2 = vars.current_slide + 1; //Current slide
//User click
if(slide1 != undefined || slide1 != null || slide1 != '') {
if (slide1 == 1 && slide2 == 2) {
$('#homeslide3').hide();
$('#homeslide4').hide();
$('#homeslide_box3').hide();
$('#homeslide_box4').hide();
} else if (slide1 == 1 && slide2 == 3) {
$('#homeslide2').hide();
$('#homeslide4').hide();
$('#homeslide_box2').hide();
$('#homeslide_box4').hide();
} else if (slide1 == 1 && slide2 == 4) {
$('#homeslide2').hide();
$('#homeslide3').hide();
$('#homeslide_box2').hide();
$('#homeslide_box3').hide();
} else if (slide1 == 2 && slide2 == 1) {
$('#homeslide3').hide();
$('#homeslide4').hide();
$('#homeslide_box3').hide();
$('#homeslide_box4').hide();
} else if (slide1 == 2 && slide2 == 3) {
$('#homeslide1').hide();
$('#homeslide4').hide();
$('#homeslide_box1').hide();
$('#homeslide_box4').hide();
} else if (slide1 == 2 && slide2 == 4) {
$('#homeslide1').hide();
$('#homeslide3').hide();
$('#homeslide_box1').hide();
$('#homeslide_box3').hide();
} else if (slide1 == 3 && slide2 == 1) {
$('#homeslide2').hide();
$('#homeslide4').hide();
$('#homeslide_box2').hide();
$('#homeslide_box4').hide();
} else if (slide1 == 3 && slide2 == 2) {
$('#homeslide1').hide();
$('#homeslide4').hide();
$('#homeslide_box1').hide();
$('#homeslide_box4').hide();
} else if (slide1 == 3 && slide2 == 4) {
$('#homeslide1').hide();
$('#homeslide2').hide();
$('#homeslide_box1').hide();
$('#homeslide_box2').hide();
} else if (slide1 == 4 && slide2 == 1) {
$('#homeslide2').hide();
$('#homeslide3').hide();
$('#homeslide_box2').hide();
$('#homeslide_box3').hide();
} else if (slide1 == 4 && slide2 == 2) {
$('#homeslide1').hide();
$('#homeslide3').hide();
$('#homeslide_box1').hide();
$('#homeslide_box3').hide();
} else if (slide1 == 4 && slide2 == 3) {
$('#homeslide1').hide();
$('#homeslide2').hide();
$('#homeslide_box1').hide();
$('#homeslide_box2').hide();
}
}
//For autorotation (no click)
if(slide1 == undefined || slide1 == null || slide1 == '') {
if(slide2 == 1) {
slide1 = 2;
$('#homeslide3').hide();
$('#homeslide4').hide();
$('#homeslide_box3').hide();
$('#homeslide_box4').hide();
} else if(slide2 == 2) {
slide1 = 3;
$('#homeslide1').hide();
$('#homeslide4').hide();
$('#homeslide_box1').hide();
$('#homeslide_box4').hide();
} else if(slide2 == 3) {
slide1 = 4;
$('#homeslide1').hide();
$('#homeslide2').hide();
$('#homeslide_box1').hide();
$('#homeslide_box2').hide();
} else if(slide2 == 4) {
slide1 = 1;
$('#homeslide2').hide();
$('#homeslide3').hide();
$('#homeslide_box2').hide();
$('#homeslide_box3').hide();
}
}
if(($('homeslide1:animated','homeslide2:animated','homeslide3:animated','homeslide4:animated').length< 1) && !(vars.in_animation)) {
if(!(slide1 == slide2)) {
//alert ('Slide clicked: ' + slide1 + ' Current slide: ' + slide2);
$('.homeslide_box' + slide1).show();
$('.homeslide_box' + slide1).css('left','85%');
$('.homeslide_box' + slide2).animate({
left:'-200%'
}, 2000)
$('.homeslide_box' + slide1).animate({
left:'1.8%',
display: 'none'
}, 2000);
$('#homeslide' + slide1).css('left','85%');
$('#homeslide' + slide1).css('margin-left','264px');
$('#homeslide' + slide1).show();
$('#homeslide' + slide2).animate({
left:'-200%'
}, 2000)
$('#homeslide' + slide1).animate({
left:'10%',
display: 'none'
}, 2000);
}
}
base.goTo2(targetSlide);
return false;
});
}