使用carouFredSel作为无限圆形滑块并带有转到特定幻灯片的控件时,我遇到了麻烦。这是我的实现代码:

$('.circular-gallery ul').carouFredSel({
    width: '100%',
    height:270,
    align:'center',
    items: {
        start: 10,
        width:340,
        visible: 10
    },
    prev: {
        button: $('.circular-gallery .prev')
    },
    next: {
        button: $('.circular-gallery .next')
    },
    scroll: {
        items: 1,
        easing: 'quadratic',
        onBefore: function(data){
            var $current = $(data.items.visible[4]);
            if(!data.scroll.duration){ // this happens on init, so just set active class
                $current.addClass('active');
            } else {
                var $active = $('.circular-gallery ul li.active');
                $active.find('.physician-name').fadeOut('normal', function(){
                    $(this).css('display','block').css('visibility','hidden');
                    $active.removeClass('active');
                });
                $current.find('.physician-name').css('visibility','visible').hide().fadeIn('normal', function(){
                    $current.addClass('active');
                });
            }
        }
    },
    auto: {
        play: false
    }
});

var $items = {};
$('.physician').hoverIntent(function(){
    slideToPhysician($(this).attr('rel'));
}, function(){ return false; });

function slideToPhysician(rel){
    var $items = $('.circular-gallery ul li').trigger('currentVisible');
    var index = $items.index($('li.'+rel));
    //console.log(index);
    //$('.circular-gallery ul').trigger('slideToPage', index);
    $('.circular-gallery ul').trigger('slideTo', index);
}


问题是每个元素的索引都不恒定。滑块每次移动时它都会改变。因此,我在确定要滑动到哪个位置时遇到了麻烦。我在滑块中的每个li上都有类,并且在链接上使用“ rel”属性将相应的类传递给hoverIntent事件。在调试过程中,如果我将鼠标悬停在同一个名称上,则索引可能会为6,然后它会滑到某个幻灯片上;如果我再次将其悬停在鼠标中,则会得到10的索引。首先出了点问题。

也许我做错了什么,但是目标是要在页面中央放置一个带有“突出显示”项目的滑块,然后如果将鼠标悬停在名称上几秒钟,则滑块会移至该特定照片。

感谢您抽出宝贵的时间来帮助您!

最佳答案

通过将数组作为参数传递给slideTo事件,我解决了几乎相同的问题。它包含单击的项和carouFredSel项索引:

$li.on('click', function() {
  var index = 0;
  $('#fred').trigger('slideTo', [$(this), index]);
});


检查示例here

关于jquery - carouFredSel slideTo/slideToPage事件,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/15417011/

10-12 15:18