jquery循环和jcarousel答案

【问题标题】：jquery cycle and jcarouseljquery循环和jcarousel
【发布时间】：2012-11-07 21:21:26
【问题描述】：

我有一个带有 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 添加一个计数器，但是当将光标悬停在寻呼机项目上时它变得混乱。

对此有任何建议。

【问题讨论】：

标签： jquery jcarousel jquery-cycle

【解决方案1】：

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

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

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

【讨论】：

在多次尝试失败后，我想我必须尝试循环插件的第 2 版。

【解决方案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');
                };
    }
};

希望这对有同样问题的人有用。仍在尝试找出是否有办法使用 wrap: jcarousel 的“循环”选项来完成这项工作。

【讨论】：