Question

这是尝试从此滑块实现我需要的最后一次尝试。我在我的网站上实现了一个名为“Super Simple Slider”的jquery内容滑块。我之前从未使用过它，到目前为止，它非常简单。但是我需要滑块的第一张幻灯片显示比所有其他幻灯片稍长的时间。 10秒然而，经过大量研究，我找不到办法做到这一点。任何人都可以看到一个解决方法，以便我可以实现这一目标吗？我可以使用纯JavaScript和jQuery来实现这一目标吗？

下面是滑块的jQuery

<script>
    $(function(){
        $('.slider').sss({
            slideShow : true, // Set to false to prevent SSS from automatically animating.
            startOn : 0, // Slide to display first. Uses array notation (0 = first slide).
            transition : 400, // Length (in milliseconds) of the fade transition.
            speed : 7000, // Slideshow speed in milliseconds.
            showNav : true // Set to false to hide navigation arrows.
        });
    });
</script>

Answer 1

我认为最好的方法是在插件中进行一些（简单的）更改：

<强> 1。添加选项（以使其可配置）：speedOnFirst（例如）

在插件设置中：

    var settings = $.extend({
        slideShow : true,
        startOn : 0,
        speed : 3500,
        speedOnFirst : 3500, // <--- HERE
        transition : 400,
        arrows : true
    }, options);

<强> 2。更改reset_timer函数中的超时

检查目标是否== 0（这意味着它是第一张幻灯片），然后根据settings.speedOnFirst而不是settings.speed

确定超时时间

    reset_timer = settings.slideShow ? function() {
        clearTimeout(timer);
        speed = (0 !== target) ? settings.speed : settings.speedOnFirst; // <--- HERE
        timer = setTimeout(next_slide, speed); // <--- Change second param here
    } : $.noop;

第3。请致电您的插件

    $('.slider').sss({
        slideShow : true,
        startOn : 0, 
        transition : 400, 
        speed : 7000, 
        speedOnFirst : 10000, // <--- Delay for your first slide
        showNav : true
    });

>> See working demo here

注意：在演示中，幻灯片会快速变化，以便您可以看到与第一个幻灯片的区别，juste会根据您的需要更改值。

Answer 2

您需要自定义插件才能完成所需。

查看非缩小版本（sss.js）并添加以下逻辑：

添加额外选项：

 var settings = $.extend({
        slideShow: true,
        startOn: 0,
        speed: 3500,
        transition: 400,
        arrows: true,
        firstSlideSpeed:10000 // new setting for first slide speed
    }, options);

更改幻灯片逻辑：

reset_timer = settings.slideShow ? function () {
                    clearTimeout(timer);

                    var slideSpeed = ((target === 0) && settings.firstSlideSpeed) ? settings.firstSlideSpeed : settings.speed; // changed here
                    timer = setTimeout(next_slide, slideSpeed); // changed here
                } : $.noop;

这应该适合你。

希望它有所帮助！

在内容滑块中显示第一张幻灯片比其他幻灯片长

2 个答案: