Приостановите слайдер Javascript на несколько секунд, нажав на кнопку под ним

Question

Я скачал код слайдера Menucool. Я использую демонстрационный код, представленный в приведенной выше ссылке. Мое требование: когда я нажимаю переключатель под ползунком, мне нужно, чтобы ползунок приостановился на несколько секунд (для меня это 10 секунд). Интервал по умолчанию составляет 2,6 секунды.

Я пытался изменить временной интервал с помощью Jquery onclick. Но это не работает.

Ниже мой HTML-код.

<div id="sliderFrame">
    <div id="slider">
        <img src="images/image-slider-1.jpg" />
        <img src="images/image-slider-2.jpg" />
        <img src="images/image-slider-3.jpg" />
        <img src="images/image-slider-4.jpg" />
        <img src="images/image-slider-5.jpg" />
    </div>
</div>

и мой код JavaScript для параметров слайдера

var sliderOptions=
{
    sliderId: "slider",
    startSlide: 0,
    effect: "series1",
    effectRandom: false,
    pauseTime: 2600,
    transitionTime: 500,
    slices: 12,
    boxes: 8,
    hoverPause: 1,
    autoAdvance: true,
    captionOpacity: 0.3,
    captionEffect: "fade",
    thumbnailsWrapperId: "thumbs",
    m: false,
    license: "mylicense"
};
var imageSlider=new mcImgSlider(sliderOptions);

Я попытался изменить время паузы на 10000 в другой функции, которая выполняется после нажатия переключателей. Код приведен ниже.

<script type="text/javascript">
$("document").ready(function(){

    $(".active").click(function(){
        alert("hi");
        var sliderOptions=
        {
            sliderId: "slider",
            startSlide: 0,
            effect: "series1",
            effectRandom: false,
            pauseTime: 10000,
            transitionTime: 500,
            slices: 12,
            boxes: 8,
            hoverPause: 1,
            autoAdvance: true,
            captionOpacity: 0.3,
            captionEffect: "fade",
            thumbnailsWrapperId: "thumbs",
            m: false,
            license: "mylicense" 
        };      
    })
    var imageSlider=new mcImgSlider(sliderOptions);
})
</script>

Может кто-нибудь, пожалуйста, помогите мне, как добиться этой функциональности..

Answer 1

Проверьте методы, поддерживаемые библиотекой слайдеров Menucool.

Опция pauseTime будет использоваться только для событий mouseout, mouseover.

Чтобы выполнить ваши требования, вы должны использовать функцию "switchAuto".

Вот рабочая демка.

Javascript:

$("#changeInterval").change(function(){
    var that = this;
    if(this.checked && imageSlider.getAuto()) {
        imageSlider.switchAuto(); // pause the animation (auto: false)
        setTimeout(function(){
            that.checked = false; // uncheck the radio button
            imageSlider.switchAuto(); // resume the animation (auto: true)
        }, 10000); // 10 seconds
    }

});

В приведенном выше коде я связываю событие "change" с переключателем (id: changeInterval).

По умолчанию в списке параметров автоматическое значение установлено в значение true, поэтому, когда мы вызываем функцию " switchAuto ", оно изменяет значение auto на false, что останавливает анимацию. И через 10 секунд я снова вызываю функцию "switchAuto" для возобновления анимации.

Таким образом, вы можете приостановить анимацию на указанное время.