0
我有一个3张图片相邻排列的画廊。首先,中心图像很大,两面图像都很小。当你点击左侧图像时(例如)中间和右侧图像滑动超过100px,左侧图像变大。然后,例如,如果再次单击中间图像,则3张图像向右滑动,中间图像再次变大,依此类推。jQuery删除类,并添加到另一个div不工作
我写的代码似乎并没有工作到目前为止,外部divs点击时放大,但不再收缩,中间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/
谢谢,这帮助了很多 –
很乐意帮助你:) –