Question

情况：

我正在使用幻灯片Slider Revolution插件。
我需要为显示的图像设置不同的时间（持续时间）。例如，我需要显示第一个图像仅2秒，而第二个图像需要显示7秒。

问题：

如何设置上一个项目的时间？有可能吗？

代码：

在初始化插件的js函数中，有以下设置： 延迟：9000 ，并且可以更改它，可以设置持续时间，但会考虑所有项目。

这是js函数：

 initRevolutionSlider: function () {
        var tpj=jQuery;

        tpj(document).ready(function() {

            if (tpj.fn.cssOriginal!=undefined)
                tpj.fn.css = tpj.fn.cssOriginal;

                var api = tpj('.fullwidthbanner').revolution(
                    {
                        delay:9000,
                        startwidth:960,
                        startheight:250,

                        onHoverStop:"off",                      // Stop Banner Timet at Hover on Slide on/off

                        thumbWidth:100,                         // Thumb With and Height and Amount (only if navigation Tyope set to thumb !)
                        thumbHeight:50,
                        thumbAmount:3,

                        hideThumbs:1,
                        navigationType:"bullet",                // bullet, thumb, none
                        navigationArrows:"solo",                // nexttobullets, solo (old name verticalcentered), none

                        navigationStyle:"round-old",            // round,square,navbar,round-old,square-old,navbar-old, or any from the list in the docu (choose between 50+ different item), custom


                        navigationHAlign:"center",              // Vertical Align top,center,bottom
                        navigationVAlign:"bottom",              // Horizontal Align left,center,right
                        navigationHOffset:30,
                        navigationVOffset:20,

                        soloArrowLeftHalign:"left",
                        soloArrowLeftValign:"center",
                        soloArrowLeftHOffset:20,
                        soloArrowLeftVOffset:0,

                        soloArrowRightHalign:"right",
                        soloArrowRightValign:"center",
                        soloArrowRightHOffset:20,
                        soloArrowRightVOffset:0,

                        touchenabled:"on",                      // Enable Swipe Function : on/off


                        stopAtSlide:-1,                         // Stop Timer if Slide "x" has been Reached. If stopAfterLoops set to 0, then it stops already in the first Loop at slide X which defined. -1 means do not stop at any slide. stopAfterLoops has no sinn in this case.
                        stopAfterLoops:-1,                      // Stop Timer if All slides has been played "x" times. IT will stop at THe slide which is defined via stopAtSlide:x, if set to -1 slide never stop automatic

                        hideCaptionAtLimit:0,                   // It Defines if a caption should be shown under a Screen Resolution ( Basod on The Width of Browser)
                        hideAllCaptionAtLilmit:0,               // Hide all The Captions if Width of Browser is less then this value
                        hideSliderAtLimit:0,                    // Hide the whole slider, and stop also functions if Width of Browser is less than this value


                        fullWidth:"on",

                        shadow:0                                //0 = no Shadow, 1,2,3 = 3 Different Art of Shadows -  (No Shadow in Fullwidth Version !)

                    });

这是单个项目的HTML：

<div class="fullwidthbanner">
    <li data-transition="3dcurtain-vertical" data-slotamount="10" data-speed="100"  data-masterspeed="300" data-thumb="assets/img/sliders/revolution/thumbs/thumb1.jpg">

        <!-- THE MAIN IMAGE IN THE FIRST SLIDE -->
        <img src="img/slideshow/1.jpg">

    </li>
</div>

在这种情况下， data-speed 和 data-masterspeed 会考虑转换的时间，而不是上次项目的时间。

或许有人知道如何实现这一目标？它必须在HTML中或者在js函数中完成？

非常感谢你！

Answer 1

According to this documentation，非常确定它适用于您的插件，它为每张幻灯片提供data-delay配置。

请参阅页面中“02 Slider items”标题下的文档。

<div class="fullwidthbanner">
    <li data-transition="3dcurtain-vertical"
        data-delay="2000"
        data-slotamount="10"
        data-speed="100"
        data-masterspeed="300"
        data-thumb="assets/img/sliders/revolution/thumbs/thumb1.jpg">

        <!-- THE MAIN IMAGE IN THE FIRST SLIDE -->
        <img src="img/slideshow/1.jpg">
    </li>
    <li data-transition="3dcurtain-vertical"
        data-delay="7000"
        data-slotamount="10"
        data-speed="100"
        data-masterspeed="300"
        data-thumb="assets/img/sliders/revolution/thumbs/thumb2.jpg">

        <!-- THE MAIN IMAGE IN THE SECOND SLIDE -->
        <img src="img/slideshow/2.jpg">
    </li>
</div>

Revolution Slider - 如何为不同的物品制作不同的时间？

1 个答案: