Сбросить интервал слайдов JQuery - PullRequest
Новая
       21

Сбросить интервал слайдов JQuery

0 голосов
/ 20 мая 2011

Я сделал слайд-шоу шириной javascript и Jquery. Но мне нужно сбросить интервал слайдов, когда пользователь вручную перемещается к следующему или предыдущему слайду. Я относительно новичок в javascipt, и это синтаксис. Любая помощь будет оценена. Вот мой код: 

<script type="text/javascript" src="/elements/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
    var currentSlideId = 0;
    var slidesAmount = 0;

    function selectSlide(id) {
        jQuery(".startpage-test.slide" + id).show().siblings(".startpage-test").hide();
        jQuery(".slideshow-show-active.slide" + id).addClass("active").siblings(".slideshow-show-active").removeClass("active");
    }

    function nextSlide() {
        currentSlideId++;
        if (currentSlideId >= slidesAmount) currentSlideId = 0;

        selectSlide(currentSlideId);
    }

    function prevSlide() {
        currentSlideId--;
        if (currentSlideId < 0) currentSlideId = slidesAmount - 1;

        selectSlide(currentSlideId);
    }

    jQuery(document).ready(function() {
        slidesAmount = jQuery(".startpage-test").length;

        jQuery(".show_previous").click(function() {
            prevSlide();
            return false;
        });

        jQuery(".show_next").click(function() {
            nextSlide();
            return false;
        });

        window.setInterval(function() {
           nextSlide();
        }, 7000); 
    });

    jQuery("object.flashContent").each(function () {
        swfobject.registerObject(jQuery(this).attr("id"), "9.0.0");
    });
</script>

Следующая / предыдущая кнопка выглядит следующим образом: 

       <div class="show_next">
                    <a href="#"><span class="slide_nav"><img src="/elements/next.png" width="57" alt="Next"></span></a>
                </div>
           <div class="show_previous">
                    <a href="#"><span class="slide_nav"><img src="/elements/prev.png" width="57" alt="Previous"></span></a>
                </div>

Во всех слайдах, конечно же, есть ссылка, и было бы неплохо остановить интервал слайдов при наведении на эту метку. К сожалению, я тоже не знаю, как это сделать.

1 Ответ

1 голос
/ 20 мая 2011

Вы можете присвоить результат setInterval() переменной, а затем вызвать clearInterval(), передавая эту переменную, когда вам нужно. Так что в вашем случае измените этот код: 

window.setInterval(function() {
    nextSlide();
},

к этому: 

var interval = window.setInterval(function() {
    nextSlide();
},

Затем, в любом .hover(), .mouseenter(), .click() или любом другом используемом вами обработчике события мыши, просто вызовите: 

window.clearInterval(interval);

Конечно, вам нужно восстановить интервал, когда вы хотите его перезапустить!

...