jQuery Slidertron 链接到幻灯片

Question

大家好，我正在使用 jQuery Slidertron本质上是一个翻页器。它内置于我正在使用的模板中，我真的很喜欢它的外观，但我想知道是否可以链接到特定的幻灯片。 例如，我想要一个按钮跳转到我的卷轴中的第二张幻灯片，而不管哪张幻灯片处于事件状态。

这可能吗？

如果不是那样，也许我可以在幕后启动一定次数的导航操作，以使用 navFirstSelector 返回滑动一个，然后翻一定数量的页面？

这是一个示例实现

<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery.slidertron-1.1.js"></script>

<!-- CSS -->

<style type="text/css">
    #slider {
        position: relative;
        width: 500px;
    }
    #slider .viewer {
        width: 500px;
        height: 375px;
        overflow: hidden;
     }
    #slider .viewer .reel {
        display: none;
        height: 375px;
    }
    #slider .viewer .reel .slide {
        position: relative;
        width: 500px;
        height: 375px;
    }
 </style>

<!-- HTML -->

<div id="slider">
     <div class="viewer">
        <div class="reel">
            <div class="slide">
                <img src="images/1.jpg" alt="" />
            </div>
            <div class="slide">
                <img src="images/2.jpg" alt="" />
            </div>
            <div class="slide">
                <img src="images/3.jpg" alt="" />
            </div>
            <div class="slide">
                <img src="images/4.jpg" alt="" />
            </div>
        </div>
    </div>
 </div>

<!-- JS -->

<script type="text/javascript">
    $('#slider').slidertron({
        viewerSelector: '.viewer',
        reelSelector: '.viewer .reel',
        slidesSelector: '.viewer .reel .slide',
        advanceDelay: 3000,
        speed: 'slow'
    });
</script>

Answer 1

使用 indicatorSelector: '.indicator ul li' 初始化您的插件

$('#slider').slidertron({
    viewerSelector: '.viewer',
    reelSelector: '.viewer .reel',
    slidesSelector: '.viewer .reel .slide',
    advanceDelay: 3000,
    speed: 'slow',
    indicatorSelector: '.indicator ul li' // Newly added line
});

然后用 css 隐藏它(只有当你不想显示这个导航点时)

.indicator{
    display:none !important;
}

然后运行以下命令

$('.indicator li').eq(0).trigger('click');

这里eq()以图片索引为参数(从0开始，就像数组索引一样)；

所以如果你想转到第 3 张幻灯片，请使用

$('.indicator li').eq(2).trigger('click');