0

BBCのホームページに似たスライドショーを作成しています。左右にスライドできるように作成しました。ループ状に無限にスクロールします。スライド機能は、順序付けされていないリストを使用し、最後または最初のリスト項目をリストに追加または追加するだけです。

私の問題は、特定のスライドにジャンプできるようにしたいということです...そしてそれを行うための良い方法を考えることができません。どんな助けでも大歓迎です。

var slider = function(transition_time, transition, transition_speed, width){    

    var self = this; var slides = [];

    // Slide left or right
    this.slide = function(direction){

        $('#slideshow-wrapper li').each(function(){
            slides.push($(this).attr('id'));
        });     

        if (direction == 0)                         
            indent =  parseInt($('#slideshow-wrapper').css('left')) + width;        
        else 
            indent =  parseInt($('#slideshow-wrapper').css('left')) - width;

        $('#slideshow-wrapper:not(:animated)').animate({'left' : indent}, transition_speed, transition, function(){    

            if (direction == 0) 
                $('#slideshow-wrapper li:last').detach().fadeIn().prependTo($('#slideshow-wrapper'));

            else
                $('#slideshow-wrapper li:first').detach().fadeIn().appendTo($('#slideshow-wrapper')); 

            $('#slideshow-wrapper').css({'left' : '-' + width + 'px'});
        }); 
    }
}

リクエストに応じて、ここにjsfiddleへのリンクがあります。http://jsfiddle.net/TqAdA/21/

4

2 に答える 2

0

これがBBCがそれを行う方法です。JQueryとクラスを使用します。

divでもあるスライドを含むラッパーdivを用意します。したがって、divには次のようなクラスがあります。

<div class="wrapper>
    <div id="dz-gridsport" class="pane pane-5" style="left: 976px;">
    <div id="dz-gridbbcnow" class="pane pane-0 focused" style="left: 1952px;">
    <div id="dz-gridentertainment" class="pane pane-1" style="left: 2928px;">
</div>

したがって、以下を使用して、現在フォーカスされているスライドのインデックスを取得できます。

var slideIndex = $(".wrapper").index($(".focused"))

このようにインデックスを使用すると、各ペインの幅とオフセットを使用して、各ペインにアクセスする方法を理解できます。

お役に立てれば。

于 2013-01-21T16:26:39.433 に答える
0

まず、BBC は従来の jquery を使用していません。GLOWの別の JavaScript ライブラリを使用します。

ただし、代わりにnivoスライダーが必要になる場合があります。

于 2012-09-24T14:46:13.503 に答える