1

大家好，我是编码的初学者，我想问你是否知道如何制作这个滑块，每 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

谢谢你！

4

1 回答 1

0

没关系，想通了

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

谢谢

关;

于 2013-09-19T22:09:44.857 回答