javascript - Javascript スライダー セット 自動

Question

これは私の最初の投稿です。

私は自分の問題の解決策を探していました.http: //www.creo.com.uy/web/mytho/で動作するjqueryスライダーがあり、これを自動回転で作成したいと考えています。

問題は、スライダーを自動回転に設定する必要があることです。両方のオプション、矢印のクリック、および自動スライドも同様です。元のコードにはそれが付属していませんでした。このテーマを開発した人でさえ、その機能を追加していないと私に言いました。そこで、javascript を理解している友人と一緒に、.js ファイルを調べてコードを追加しましたが、何かが欠けています。最後の画像では、4 から 3、3 から 4 の再帰ループに入ります。等々。

元のファイルと変更されたファイルの両方をここに提供します。これで私を助けてくれることを願っています!

オリジナル：

    jQuery(document).ready(function($) {
"use strict";

//prev = top
//current = middle
//next = bottom

var windowHeight = $(window).height();

$('.slide:first-child').addClass('current');
$('.slide:nth-child(2)').addClass('next').css('top', windowHeight);

$(window).resize(function() {
    windowHeight = $(window).height();
    $('.slide.next').css('top', windowHeight);
    $('.slide.prev').css('top', -windowHeight);
});

if (!$('.slide.current').next('.slide').length) { $('#next').hide(); }
if (!$('.slide.current').prev('.slide').length) { $('#prev').hide(); }

function nextSlide() {
    var current = $('.slide.current'),
            next = current.next('.slide'),
            prev = current.prev('.slide');

    if (next.length) {
        current.animate({
            top: -windowHeight
        }, 300);
        next.animate({
            top: 0
        }, 300);
        prev.removeClass('prev');
        current.removeClass('current').addClass('prev');
        next.removeClass('next').addClass('current');
        next.next('.slide').addClass('next').css('top', windowHeight);

        if (!$('.slide.current').next('.slide').length) {
            $('#next').hide();
            $('#prev').show();
        } else {
            $('#next').show();
        }
    }
}

function prevSlide() {
    var current = $('.slide.current'),
            next = current.next('.slide'),
            prev = current.prev('.slide');

    if (prev.length) {
        current.animate({
            top: windowHeight
        }, 300);
        prev.animate({
            top: 0
        }, 300);
        next.removeClass('next');
        current.removeClass('current').addClass('next');
        prev.removeClass('prev').addClass('current');
        prev.prev('.slide').addClass('prev').css('top', -windowHeight);

        if (!$('.slide.current').prev('.slide').length) {
            $('#prev').hide();
            $('#next').show();
        } else {
            $('#prev').show();
        }
    }
}

$('#next').live('click', function() {
    nextSlide();
    return false;
});

$('#prev').live('click', function() {
    prevSlide();
    return false;
});

//Add swipe capabilities
$(".slide").swipe( {
    swipeUp:function(event, direction, distance, duration, fingerCount) {
        nextSlide();
    },
    swipeDown:function(event, direction, distance, duration, fingerCount) {
        prevSlide();
    },
    //Default is 75px, set to 0 for demo so any distance triggers swipe
    threshold:0
});
    });

改造:

    jQuery(document).ready(function($) {
"use strict";

//prev = top
//current = middle
//next = bottom

var windowHeight = $(window).height();

var timeSlider = 3000;
var move = setTimeout(autoSlider,timeSlider);

function autoSlider(){
    if (!$('.slide.current').next('.slide').length) {
        prevSlide();
    }else{
        nextSlide();
    }
}


$('.slide:first-child').addClass('current');
$('.slide:nth-child(2)').addClass('next').css('top', windowHeight);

$(window).resize(function() {
    windowHeight = $(window).height();
    $('.slide.next').css('top', windowHeight);
    $('.slide.prev').css('top', -windowHeight);
});

if (!$('.slide.current').next('.slide').length){ 
    $('#next').hide(); 
}
if (!$('.slide.current').prev('.slide').length){ 
    $('#prev').hide(); 
}

function nextSlide() {
    var current = $('.slide.current'),
            next = current.next('.slide'),
            prev = current.prev('.slide');

    if (next.length) {
        current.animate({
            top: -windowHeight
        }, 300);
        next.animate({
            top: 0
        }, 300);
        prev.removeClass('prev');
        current.removeClass('current').addClass('prev');
        next.removeClass('next').addClass('current');
        next.next('.slide').addClass('next').css('top', windowHeight);

        if (!$('.slide.current').next('.slide').length) {
            $('#next').hide();
            $('#prev').show();
        } else {
            $('#next').show();
        }
    }
    clearTimeout(move);
    move = setTimeout(autoSlider,timeSlider);
}


function prevSlide() {
    var current = $('.slide.current'),
            next = current.next('.slide'),
            prev = current.prev('.slide');

    if (prev.length) {
        current.animate({
            top: windowHeight
        }, 300);
        prev.animate({
            top: 0
        }, 300);
        next.removeClass('next');
        current.removeClass('current').addClass('next');
        prev.removeClass('prev').addClass('current');
        prev.prev('.slide').addClass('prev').css('top', -windowHeight);

        if (!$('.slide.current').prev('.slide').length) {
            $('#prev').hide();
            $('#next').show();
        } else {
            $('#prev').show();
        }
    }
    clearTimeout(move);
    move = setTimeout(autoSlider,timeSlider);
}

$('#next').live('click', function() {
    nextSlide();
    return false;
});

$('#prev').live('click', function() {
    prevSlide();
    return false;
});

//Add swipe capabilities
$(".slide").swipe( {
    swipeUp:function(event, direction, distance, duration, fingerCount) {
        nextSlide();
    },
    swipeDown:function(event, direction, distance, duration, fingerCount) {
        prevSlide();
    },
    //Default is 75px, set to 0 for demo so any distance triggers swipe
    threshold:0
});
    });

よろしくお願いします！

ナチョ。