0

私はjQueryを使い始めたばかりで、ここにあるスライドショーギャラリーのチュートリアルで作業を始めました: http://tutorialzine.com/2009/11/beautiful-apple-gallery-slideshow/

スライドショーの最新バージョンでは、各スライドを自動的に進めるコードが追加されていますが、最後に到達すると、単純に進めるのではなく、最初のスライドに「巻き戻します」。ポジショニングと「アニメーション」の使用に関係があると思いますが、うまくいかないようです。

$(document).ready(function(){
/* This code is executed after the DOM has been completely loaded */

var totWidth=0;
var positions = new Array();

$('#slides .slide').each(function(i){

    /* Traverse through all the slides and store their accumulative widths in totWidth */

    positions[i]= totWidth;
    totWidth += $(this).width();

    /* The positions array contains each slide's commulutative offset from the left part of the container */

    if(!$(this).width())
    {
        alert("Please, fill in width & height for all your images!");
        return false;
    }

});

$('#slides').width(totWidth);

/* Change the cotnainer div's width to the exact width of all the slides combined */

$('#nav ul li a').click(function(e,keepScroll){

        /* On a thumbnail click */

        $('li.navItem').removeClass('active').addClass('over');
        $(this).parent().addClass('active');

        var pos = $(this).parent().prevAll('.navItem').length;

        $('#slides').stop().animate({marginLeft:-positions[pos]+'px'},450);
        /* Start the sliding animation */

        e.preventDefault();
        /* Prevent the default action of the link */


        // Stopping the auto-advance if an icon has been clicked:
        if(!keepScroll) clearInterval(itvl);
});

$('#nav ul li.navItem:first').addClass('active').siblings().addClass('over');
/* On page load, mark the first thumbnail as active */



/*****
 *
 *  Enabling auto-advance.
 *
 ****/

var current=1;
function autoAdvance()
{
    if(current==-1) return false;

    $('#nav ul li a').eq(current%$('#nav ul li a').length).trigger('click',[true]); // [true] will be passed as the keepScroll parameter of the click function on line 28
    current++;
}

// The number of seconds that the slider will auto-advance in:

var changeEvery = 5;

var itvl = setInterval(function(){autoAdvance()},changeEvery*1000);

});
4

1 に答える 1

0

なぜあなた自身を構築するのですか？他の人が構築したものの上に構築する力を受け入れます。Coda Sliderと呼ばれるまともで非常に人気のあるスライダープラグインがあります。必要に応じてカスタマイズするための便利なオプションがたくさんあります。

于 2012-08-15T15:50:18.483 に答える