javascript - jQuery 自动和手动幻灯片

Question

该网页需要自动运行的幻灯片，但如果需要，您可以通过按下按钮跳到下一张或上一张幻灯片。我提供我的代码。如何添加自动幻灯片并尽可能优化此代码变体？

$( document ).ready(function() {

changeSlide('next');

$('#sliderToLeft').on('click', function() {
    changeSlide('previous');
});

$('#sliderToRight').on('click', function() {
    changeSlide('next');
});

function changeSlide(direction) {
    var currentSlide = $('.active');
    var nextSlide = currentSlide.next('.slide');
    var previousSlide = currentSlide.prev();

    if (direction == 'next') {
        if (nextSlide.length) {
            nextSlide.addClass('active');
            nextSlide.children('h1').delay(1000).slideDown(800);
            nextSlide.children('h2').delay(1200).slideDown(800);
            nextSlide.children('h3').delay(1900).slideDown(800);
            nextSlide.children('button').delay(2800).slideDown(800);
        } else {
            $('#slidesArea > .slide').first().addClass('active');
            $('#slidesArea > .slide').first().children('h1').delay(1000).slideDown(800);
            $('#slidesArea > .slide').first().children('h2').delay(1200).slideDown(800);
            $('#slidesArea > .slide').first().children('h3').delay(1900).slideDown(800);
            $('#slidesArea > .slide').first().children('button').delay(2800).slideDown(800);
        }
    } else {
        if (previousSlide.length) {
            previousSlide.addClass('active');
            previousSlide.children('h1').delay(1000).slideDown(800);
            previousSlide.children('h2').delay(1200).slideDown(800);
            previousSlide.children('h3').delay(1900).slideDown(800);
            previousSlide.children('button').delay(2800).slideDown(800);
        } else {
            $('#slidesArea > .slide').last().addClass('active');
            $('#slidesArea > .slide').last().children('h1').delay(1000).slideDown(800);
            $('#slidesArea > .slide').last().children('h2').delay(1200).slideDown(800);
            $('#slidesArea > .slide').last().children('h3').delay(1900).slideDown(800);
            $('#slidesArea > .slide').last().children('button').delay(2800).slideDown(800);
        }
    }

    currentSlide.removeClass('active');
    currentSlide.children('h1').slideUp();
    currentSlide.children('h2').slideUp();
    currentSlide.children('h3').slideUp();
    currentSlide.children('button').slideUp();

}});

标签： javascriptjquery

Answer 1

尝试

setInterval(function() { 
 changeSlide('next');
},  3000);

喜欢

$( document ).ready(function() {

setInterval(function() { 
 changeSlide('next');
},  3000);


$('#sliderToLeft').on('click', function() {
    changeSlide('previous');
});

$('#sliderToRight').on('click', function() {
    changeSlide('next');
});

function changeSlide(direction) {
    var currentSlide = $('.active');
    var nextSlide = currentSlide.next('.slide');
    var previousSlide = currentSlide.prev();

    if (direction == 'next') {
        if (nextSlide.length) {
            nextSlide.addClass('active');
            nextSlide.children('h1').delay(1000).slideDown(800);
            nextSlide.children('h2').delay(1200).slideDown(800);
            nextSlide.children('h3').delay(1900).slideDown(800);
            nextSlide.children('button').delay(2800).slideDown(800);
        } else {
            $('#slidesArea > .slide').first().addClass('active');
            $('#slidesArea > .slide').first().children('h1').delay(1000).slideDown(800);
            $('#slidesArea > .slide').first().children('h2').delay(1200).slideDown(800);
            $('#slidesArea > .slide').first().children('h3').delay(1900).slideDown(800);
            $('#slidesArea > .slide').first().children('button').delay(2800).slideDown(800);
        }
    } else {
        if (previousSlide.length) {
            previousSlide.addClass('active');
            previousSlide.children('h1').delay(1000).slideDown(800);
            previousSlide.children('h2').delay(1200).slideDown(800);
            previousSlide.children('h3').delay(1900).slideDown(800);
            previousSlide.children('button').delay(2800).slideDown(800);
        } else {
            $('#slidesArea > .slide').last().addClass('active');
            $('#slidesArea > .slide').last().children('h1').delay(1000).slideDown(800);
            $('#slidesArea > .slide').last().children('h2').delay(1200).slideDown(800);
            $('#slidesArea > .slide').last().children('h3').delay(1900).slideDown(800);
            $('#slidesArea > .slide').last().children('button').delay(2800).slideDown(800);
        }
    }

    currentSlide.removeClass('active');
    currentSlide.children('h1').slideUp();
    currentSlide.children('h2').slideUp();
    currentSlide.children('h3').slideUp();
    currentSlide.children('button').slideUp();

}});