7

情况：

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

问题：

如何设置最后一个项目的时间？是否可以？

编码：

在初始化插件的 js 函数中，有这些设置： delay: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 函数中完成？

非常感谢你！

4

1 回答 1

19

根据这个文档，很确定它适用于您的插件，它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>
于 2014-03-02T17:01:20.513 回答