javascript - Autoplay function for a basic jquery slider?

I would like to add an autoplay feature that automatically rotates the slides every 4 seconds or so and was wondering how I would go about adding that functionality to my current slider(code below):

UPDATE added current code which has slider autorotating and in the right direction, but the navigation arrows don't work anymore.

Thanks!

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="/<?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,
            plete: function() {
                slideInProgress--;
            }
        });
        //current.animate({left: '-100%'}, 1500);
        current.animate({
            left: '-100%'
        }, {
            duration: 1500,
            plete: 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,
            plete: function() {
                slideInProgress--;
            }
        });
        //current.animate({left: '100%'}, 1500);
        current.animate({
            left: '100%'
        }, {
            duration: 1500,
            plete: 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);

I would like to add an autoplay feature that automatically rotates the slides every 4 seconds or so and was wondering how I would go about adding that functionality to my current slider(code below):

UPDATE added current code which has slider autorotating and in the right direction, but the navigation arrows don't work anymore.

Thanks!

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./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,
            plete: function() {
                slideInProgress--;
            }
        });
        //current.animate({left: '-100%'}, 1500);
        current.animate({
            left: '-100%'
        }, {
            duration: 1500,
            plete: 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,
            plete: function() {
                slideInProgress--;
            }
        });
        //current.animate({left: '100%'}, 1500);
        current.animate({
            left: '100%'
        }, {
            duration: 1500,
            plete: 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);

Share Improve this question edited Oct 25, 2013 at 14:50 asked Oct 22, 2013 at 21:44 APAD1 13.7k8 gold badges46 silver badges72 bronze badges

Add a ment |

1 Answer 1

Sorted by: Reset to default 3

move your slide function out of setInterval and call the function with it. this way the calls to the function in the onclick attribute of your elements will work too:

function slide(dir) {
//the content of function
}

setInterval(function(){ slide(dir); }, 4000);

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Autoplay function for a basic jquery slider? - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)