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
});
    });

非常感谢您提前！

纳乔。