javascript - Jqueryカスタムスライダー無限ループ

Question

このチュートリアルを使用して jquery スライダーを作成しました

http://css-plus.com/2010/09/create-your-own-jquery-image-slider/

、写真が自動的にスライドしますが、一度だけです。無限ループでそれらを一周するにはどうすればよいですか?

オンライン例:

www.vytvarkajablonec.jecool.net/ati

よろしくお願いします。

Answer 1

これについては、チュートリアルの JS コードを置き換えます。

$(document).ready(function () {

    // Gallery
    if (jQuery("#gallery").length) {

        // Declare variables
        var totalImages = jQuery("#gallery > li").length,
            imageWidth = jQuery("#gallery > li:first").outerWidth(true),
            totalWidth = imageWidth * totalImages,
            visibleImages = Math.round(jQuery("#gallery-wrap").width() / imageWidth),
            visibleWidth = visibleImages * imageWidth,
            stopPosition = (visibleWidth - totalWidth);

        jQuery("#gallery").width(totalWidth);

        jQuery("#gallery-prev").click(function () {
            if (jQuery("#gallery").position().left < 0 && !jQuery("#gallery").is(":animated")) {
                jQuery("#gallery").animate({
                    left: "+=" + imageWidth + "px"
                });
            }

            if (jQuery("#gallery").position().left === 0) {
                jQuery("#gallery > li:last").prependTo($("#gallery"));
            }

            return false;
        });

        jQuery("#gallery-next").click(function () {
            if (jQuery("#gallery").position().left > stopPosition && !jQuery("#gallery").is(":animated")) {
                jQuery("#gallery").animate({
                    left: "-=" + imageWidth + "px"
                });
            }

            if (jQuery("#gallery").position().left === stopPosition) {
                jQuery("#gallery > li:first").appendTo($("#gallery"));
            }

            return false;
        });
    }

});

Answer 2

ギャラリーの最後にある場合は、ギャラリーをアニメーション化して最初の位置に戻します。

var oGallary = $('#gallery');
var gallarWidth = oGallary.width();

if(oGalary.position().left > stopPosition && oGallary.is(":animated") == false)
{
    oGallary.animate({left : "-=" + imageWidth + "px"});
}
else if ( oGalary.position().left <= stopPosition && oGallary.is(":animated") == false )
{  
    oGallary.animate({left : "+=" + gallaryWidht + "px"}) // Get full length of the entire gallary
}