基本 jquery 滑块的自动播放功能

Autoplay function for a basic jquery slider?

本文关键字：自动播放功能 jquery 基本更新时间：2023-09-26

我想添加一个自动播放功能，该功能每 4 秒左右自动旋转幻灯片，并且想知道如何将该功能添加到我当前的滑块（下面的代码）：

UPDATE 添加了当前代码，该代码具有滑块自动旋转和正确方向，但导航箭头不再起作用。

谢谢！

.HTML：

<div id='top_slider' >
    <div id='container' >
        <?php $dots=0;$posts=query_posts('category_name=slider-feature');
        if ( have_posts() ): while ( have_posts() ) : the_post(); ?>
            <?php if (get_post_meta($post->ID, 'slider_vimeo_id', true)!==""): ?>
                <div style="left: 0%;" class="slide">
                    <iframe src="http://player.vimeo.com/video/<?php echo get_post_meta($post->ID, 'slider_vimeo_id', true); ?>" width="960" height="540" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
                </div>
            <?php else: ?>
                <div style="left: 100%;" class="slide">
                    <a href='<?php echo get_post_meta($post->ID, 'slider_link_url', true); ?>'><img class="fullscreen_img" src="<?php echo get_post_meta($post->ID, 'slider_image_url', true); ?>"></a>
                </div>
    </div>
    <div id='slider_nav' class='inline-block'>
        <div id='center'>
            <div class="arrow_left element hot_img" onclick="slide('right')"></div>
            <?php for ($i=0; $i<$dots; $i++) { ?>
                <div class="dot element hot_img" onclick="slide(<?php echo $i ?>)"></div>
            <?php } ?>
                <div class="arrow_right element hot_img" onclick="slide('left')"></div>
        </div>
    </div>           
</div>

Javascript：

function slide(dir) {
    if (slideInProgress != 0) {
        return;
    }
    slideInProgress = 3;
    var current, next, nextSlide;
    current = jQuery(slides[currentSlideIndex]);
    if (!isNaN(dir)) {
        next = dir;
        if (next > currentSlideIndex)
            dir = 'left';
        else
            dir = 'right';
    }
    ;
    if (dir == 'left') {
        if (!next) {
            next = currentSlideIndex + 1;
            if (next >= slides.length) {
                next = 0;
            }
        }
        nextSlide = jQuery(slides[next]);
        nextSlide.css('left', '100%');
        nextSlide.css('z-index', parseInt(current.css('z-index'), 10) + 1);
        //nextSlide.animate({left: '0%'}, 1500);
        nextSlide.animate({
            left: '0%'
        }, {
            duration: 1500,
            complete: function() {
                slideInProgress--;
            }
        });
        //current.animate({left: '-100%'}, 1500);
        current.animate({
            left: '-100%'
        }, {
            duration: 1500,
            complete: function() {
                slideInProgress--;
            }
        });
    } else {
        console.log('moving right');
        if (!next) {
            next = currentSlideIndex - 1;
            if (next < 0) {
                next = slides.length - 1;
            }
        }
        nextSlide = jQuery(slides[next]);
        nextSlide.css('left', '-100%');
        nextSlide.css('z-index', parseInt(current.css('z-index'), 10) + 1);
        //nextSlide.animate({left: '0%'}, 1500);
        nextSlide.animate({
            left: '0%'
        }, {
            duration: 1500,
            complete: function() {
                slideInProgress--;
            }
        });
        //current.animate({left: '100%'}, 1500);
        current.animate({
            left: '100%'
        }, {
            duration: 1500,
            complete: function() {
                slideInProgress--;
            }
        });
    }
    current.addClass('active');
    nextSlide.removeClass('active');
    var el = jQuery('.dot:eq(' + currentSlideIndex + ')');
    src = el.css("background-image").replace("_over", "_off");
    el.css("background-image", src);
    el.removeClass('active');
    el = jQuery('.dot:eq(' + next + ')');
    src = el.css("background-image").replace("_off", "_over");
    el.css("background-image", src);
    el.addClass('active');
    console.log('currentSlideIndex' + currentSlideIndex);
    console.log('next' + next);
    console.log('dir' + dir);
    currentSlideIndex = next;
    // **** //
    slideInProgress--;
    // **** //
}
setInterval(function() {slide('left')}, 6000);

将

幻灯片函数移出 setInterval 并使用它调用该函数。这样，在元素的 OnClick 属性中对函数的调用也将起作用：

function slide(dir) {
//the content of function
}
setInterval(function(){ slide(dir); }, 4000);