Question

我有一个jquery循环和jcarousel的画廊设置。我使用php生成缩略图

<ul id="pager">
    <?php foreach ($thumbs as  $thumb) : ?>
<li><a href="#"><?php echo $thumb ?> </a></li>
    <?php endforeach; ?>
</ul>

现在我创建一个轮播并将寻呼机附加到循环

$('#pager').jcarousel({});
if ( $('#images').length > 0 ) {
     $('#images').before('<ul id="nav">').cycle({ 
     fx:     'turnDown', 
     speed:  500, 
     timeout: 5000, 
     pagerEvent: 'mouseover',
     pager:  '#pager', 
     pagerAnchorBuilder: function(idx, slide) { 
         return '#pager li:eq(' + idx + ') a'; 
    } ,
    after: function(dir, id, el) {
        var w= $('.jcarousel-clip-horizontal').width();
        var i = $('.jcarousel-item-horizontal').width();
        var slide = $('#pager .activeSlide');
        if ( slide.position.left > w-i  ) {
            $('div.jcarousel-next').trigger('click');
        }
    }
});
  $('#pager a').mouseenter(function() { 
     $('#images').cycle('toggle'); 
}).mouseleave(function(){
     $('#images').cycle('toggle'); 
});

我的寻呼机中有7个元素可见，我想触发下一个不可见的项目的滚动事件。

我尝试使用jquery index（）函数为activeSlider添加一个计数器，但是当用光标悬停在寻呼机项目上时它变得很乱。

对此提出任何建议。

Answer 1

我认为你可以使用循环版本2

http://jquery.malsup.com/cycle2/demo/caro-pager.php

http://jquery.malsup.com/cycle2/demo/carousel.php

Answer 2

好的，所以我发现问题的解决方案花了我一段时间，可能会做得更好，但这里是我使用的代码我认为这很直接

$('#pager').jcarousel({
    scroll: 1,
    wrap:'last',
});
if ( $('#images').length > 0 ) {
    $('#images').before('<ul id="nav">').cycle({ 
        fx:     'turnDown', 
        speed:  500, 
        timeout: 5000, 
        pagerEvent: 'mouseover',
        pager:  '#pager', 
        pagerAnchorBuilder: function(idx, slide) { 
            return '#pager li:eq(' + idx + ') a'; 
        } 
        ,after: onBefore
    });
};

function onBefore(curr,next,opts) {
    var size = $('#pager li').size();
    var activeSlide = $('#pager .activeSlide');
    var position = activeSlide.offset();

    // get the position of the carousel clip container
    var container = $('.jcarousel-clip');
    var containerOff = container.offset();

    //first load 
    if(position!=null){
                    // get the information 
        var slideRigt = position.left + activeSlide.width();
        var containerRight = containerOff.left + container.width();
                    // slide is out ou bound on the right
            if ( slideRigt > containerRight ) {
                    $('div.jcarousel-next').trigger('click');
                }
                    // slide is out of bound on the left - rewind/wrap thumbnails to first item
                    else if ( position.left < containerOff.left ) {
                    $('div.jcarousel-next').trigger('click');
                };
    }
};

希望这对有同样问题的人有用。仍然试图弄清楚是否有一种方法可以使用包装：jcarousel的'循环'选项。

jquery循环和jcarousel

2 个答案: