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滑块库支持的Methods。

pauseTime 选项仅用于mouseout，mouseover事件。

为了满足您的要求，您必须使用＆＃34; switchAuto＆＃34;功能

这是working demo。

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
    }

});

在上面的代码中，我正在约束＆＃34;更改＆＃34;单选按钮上的事件（id：changeInterval）。

默认情况下，在选项列表中，自动值已设置为true，因此当我们调用＆＃34; switchAuto ＆＃34;函数，它将自动值更改为false，从而停止动画。 10秒钟后，我再次呼叫＆＃34; switchAuto＆＃34;恢复动画的功能。

通过这种方式，您可以在指定时间内暂停动画。

单击下面的按钮，暂停Javascript滑块几秒钟

1 个答案: