0

我有一个包含 3 张图片的画廊，它们并排排列在一起。首先，中心图像很大，两侧的 2 个图像很小。当您单击左侧图像（例如）时，中间和右侧图像滑动超过 100px，左侧图像变大。再比如再点击中间的图片，3张图片向右滑动，中间的图片又变大了，以此类推。

到目前为止，我编写的代码似乎不起作用，单击时外部 div 会放大但不会再次缩小，而中间 div 在单击时从不执行任何操作。

有人能告诉我我的代码有什么问题吗：

if($('.main_image').hasClass('active_image')){
  $('.second_image').click(function () {
$('#images_holder').animate({
  left: "+100"
});
$('.main_image').removeClass('active_image')    ;
$(this).addClass('active_image');
  });
}
if($('.main_image').hasClass('active_image')){
  $('.third_image').click(function () {
$('#images_holder').animate({
  left: "-100px"
});
$('.main_image').removeClass('active_image')    ;
$(this).addClass('active_image');
  });
}
if($('.second_image').hasClass('active_image')){
  $('.main_image').click(function () {
$('#images_holder').animate({
  left: "0px"
});
$('.second_image').removeClass('active_image')  ;
$(this).addClass('active_image');
  });
}
if($('.second_image').hasClass('active_image')){
  $('.third_image').click(function () {
$('#images_holder').animate({
  left: "-100px"
});
$('.second_image').removeClass('active_image')  ;
$(this).addClass('active_image');
  });
}
if($('.third_image').hasClass('active_image')){
  $('.main_image').click(function () {
$('#images_holder').animate({
  left: "0px"
});
$('.third_image').removeClass('active_image')   ;
$(this).addClass('active_image');
  });
}
if($('.third_image').hasClass('active_image')){
  $('.second_image').click(function () {
$('#images_holder').animate({
  left: "+100px"
});
$('.third_image').removeClass('active_image')   ;
$(this).addClass('active_image');
  });
}

这是我工作的 JSfiddle：http: //jsfiddle.net/QS3BW/3/

4

1 回答 1

1

你不能if这样说。这是运行代码的事件。当你有click事件时，你可以设置你的条件。

尝试这样的事情：

$("#images_holder").children().click(function(){

// if has class run this code

// else if has this class, run this code

...

});
于 2013-09-26T15:22:57.633 回答