Функция автозапуска для базового слайдера jquery?

0

Я хотел бы добавить функцию автовоспроизведения, которая автоматически поворачивает слайды каждые 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);
Теги:
slider
rotation

1 ответ

3
Лучший ответ

переместите слайд-функцию из setInterval и вызовите функцию с ней. таким образом, вызовы функции в атрибуте onclick ваших элементов также будут работать:

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

setInterval(function(){ slide(dir); }, 4000);
  • 0
    Спасибо за предложение, это сработало. Через 4 секунды он переключится с первого слайда на последний, но затем остановится. Я предполагаю, что это потому, что функция позволяет ей скользить влево или вправо в зависимости от кнопки со стрелкой, которую нажимает пользователь. Есть ли способ сделать так, чтобы он только автоматизировал функцию слайда (справа)?
  • 0
    Хорошо, я заработал, изменив «слайд функции (dir)» на: window.setInterval (слайд функции (dir) {}, 4000), но он все еще вращается в неправильном направлении.
Показать ещё 5 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню