在没有插件的情况下点击幻灯片

时间:2013-01-16 13:57:15

标签: jquery slideshow image-gallery

我有一个图片库,我想在每次点击左/右按钮时更改图像。 我知道在Cycle Plugin上有这个功能,但我不想在我的页面中使用太多的插件。 所以我试着这样做:

$(document).ready(function(){
    $('.gallery a').click(function(){
        var path = 'images/display/'
        var i = 2;
        event.preventDefault();
        $('.lightbox').removeClass('preloader').fadeIn();
        $('.display').html('<img src="'+path+i+'.jpg" />').addClass('imgdisplay');
    });
    $('.leftnav').click(function(){
        i++;
    });
    $('.rightnav').click(function(){
        i--;
    });
});

显然,它没有运作,但是,为什么?

非常感谢!

1 个答案:

答案 0 :(得分:0)

var i = 2;
var max = 10;
$('.gallery a').click(function(event) {
    var path = 'images/display/'
    event.preventDefault();
    $('.lightbox').removeClass('preloader').fadeIn();
    if ($(this).hasClass('leftnav')) {
      if(i== max) return;  
      i++;
    }
    else {
       if(i==0) return;
        i--;
    }
    $('.display').html('<img src="'+path+i+'.jpg" />').addClass('imgdisplay');
});