Question

大家好，我是编码的初学者，我想问你是否知道怎么做滑块，每5秒自动滑动一次。

这是滑块的代码;

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

我尝试使用setInterval，但没有像我希望的那样工作，

setInterval(function(){
$('#next, #prev').trigger('click');

}，4000
）;

这会在5秒后向下滑动一张幻灯片，然后每1秒钟不断上下滑动。

我希望幻灯片在循环中像这样滑动：1,2,3,2,1,2,3,2,1

谢谢！

Answer 1

没关系，想通了

var flag = false; 
setInterval ( function() { 
    if (flag == false){
        nextSlide();
        if($('.slide.next').length == 0) {
            flag = true;
        }
    }
    else {
        prevSlide();
        if($('.slide.prev').length == 0) {
            flag = false;
        }
    }
}, 6000);

谢谢

CLOSE;

jQuery通过间隔，超时自动滑块

1 个答案: