0

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 のカウンターを追加しようとしましたが、カーソルでページャー項目にカーソルを合わせると、乱雑になりました。

これに関するアドバイス。

4

2 に答える 2

0

サイクルのバージョン2を使用できると思います

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

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

于 2012-10-26T15:18:05.600 に答える
0

わかりましたので、whisの問題の解決策を見つけるのにしばらく時間がかかりました。おそらくもっとうまくいく可能性がありますが、これが私が使用するコードです。かなり簡単だと思います

$('#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の「循環」オプション。

于 2012-11-07T13:21:26.973 に答える