2

像这里的照片库：http://jquery.malsup.com/cycle2/demo/caro-pager.php

我正在创建图像中的此类照片库。它应该有以下选项：当单击缩略图行上的下一个/上一个按钮时，拇指应该移动一个位置，但移动拇指不应该改变大照片。我用 Cycle2 制作它并以这种方式初始化它：

var slideshows = $('.cycle-slideshow').on('cycle-next cycle-prev', function(e, opts) {
    if($(this).attr('id') == 'cycle-1'){
        slideshows.not(this).cycle('goto', opts.currSlide);
    }
});

$('#cycle-2 .cycle-slide').click(function(){
    var index = $('#cycle-2').data('cycle.API').getSlideIndex(this);
    slideshows.cycle('goto', index);
});

但是现在当单击缩略图行上的上一个/下一个按钮时 - 它总是会更改缩略图中的活动幻灯片。所以我有一张活跃的大幻灯片和其他活跃的拇指（它们不一样）。我需要防止在拇指上的 prev/next 上更改“.cycle-slide-active”。可以用当前插件解决这个问题吗？

4

1 回答 1

0

您需要确保您id只需要像您所做的那样cycle-1打电话cyclecycle-1cycle-2

改变

if($(this).attr('id') == 'cycle-1'){
slideshows.not(this).cycle('goto', opts.currSlide);
}

至

if($(this).attr('id') == 'cycle-1'){
    $(this).cycle('goto', opts.currSlide);
}

例子

http://jsfiddle.net/pzPXE/12/

更新

$('.cycle-slide-active').removeClass('cycle-slide-active'); 
$('#cycle-2').on('cycle-update-view', function(e, opts) {
    $('.cycle-slide-active').removeClass('cycle-slide-active'); 
});

http://jsfiddle.net/pzPXE/13/

更新 2

我不得不css稍微修改一下，因为底部轮播中只有 8 幅图像中的 7 幅可见。但希望这会有所帮助。

$('#cycle-2 .cycle-slide').click(function(){
        var index = $('#cycle-2').data('cycle.API').getSlideIndex(this);
        $('#cycle-1').cycle('goto', index);
    });
    $('#cycle-1').on('cycle-update-view', function(e, opts) {
        if(opts.currSlide < slides-slidesVisible ){
            $('#cycle-2').cycle('goto', opts.currSlide);
        }   
        else
            $('#cycle-2').cycle('goto', slides-slidesVisible);            
        currentSlide = opts.currSlide;
        $('#cycle-2 .cycle-slide-active').removeClass('cycle-slide-active');
        $('#cycle-2 .cycle-slide').eq(currentSlide+1).addClass('cycle-slide-active');
    }); 
    $('#cycle-2').on('cycle-update-view', function(e, opts) {
        $('#cycle-2 .cycle-slide-active').removeClass('cycle-slide-active');
        $('#cycle-2 .cycle-slide').eq(currentSlide+1).addClass('cycle-slide-active');        
});

http://jsfiddle.net/pzPXE/16/

于 2014-01-03T22:33:41.737 回答