1

我正在使用Orbit jQuery 滑块。棘手的是我正在页面上运行该滑块的六次迭代。我想要它做的是告诉我我在图像 4 of 7、5 of 7 等...

这是我到目前为止所做的:

$(window).load(function() {
    var n = $('#dicks-feature img').size();

    $('#dicks-feature img').each(function(index) { 
        var title = $(this).attr('title');
        var z = $(this).css('z-index');

        function stuff() {
            if (z == 3) {

                $('<p>' + title + 'of' + n + '</p>').appendTo('.count');
            }
        }

        setInterval(stuff,3000);
    });     

});

的HTML:

<div id="dicks" class="item first">
        <div id="dicks-feature" class="feature">
            <img src="img/features/DSG/dicks.jpg" width="711" height="369" alt="Dicks Sporting Goods" title="1"/>
            <img src="img/features/DSG/DSG_Primary_1.jpg" width="711" height="369" alt="Dicks Sporting Goods" title="2" />
            <img src="img/features/DSG/DSG_Primary_3.jpg" width="711" height="369" alt="Dicks Sporting Goods" title="3"  />
            <img src="img/features/DSG/DSG_Primary_4.jpg" width="711" height="369" alt="Dicks Sporting Goods" title="4"  />
            <img src="img/features/DSG/DSG_Primary_5.jpg" width="711" height="369" alt="Dicks Sporting Goods" title="5"  />
            <img src="img/features/DSG/DSG_Primary_6.jpg" width="711" height="369" alt="Dicks Sporting Goods" title="6"  />
            <img src="img/features/DSG/DSG_Primary_7.jpg" width="711" height="369" alt="Dicks Sporting Goods" title="7"  />
        </div><!--/feature-->
        <div class="count">

        </div>
    </div><!--/dicks-->

所以我能设法得到的是图像的总数:x of 7。如果我单击滑块下一步按钮,x 永远不会切换。它总是保持 1 of 7、1 of 7 等等......

我试图以此为基础的 z-index 为 3。当 img 可见时,Orbit 将其分配给 img 标签。所有其他图像的索引均为 1。我使用 title 属性给我 7 个中的 2 个、7 个中的 3 个等。

有任何想法吗?我根本不是 JS 绝地 :(

谢谢!

4

2 回答 2

2

当你初始化你的轨道滑块时,会调用一个事件afterSlideChange,每次滑块改变时都会调用它。

它没有参数,但当前显示的图像用作上下文 ( this)。所以你可以检查它index(),然后做这样的事情:

$(function($) {
    $('.featured').orbit({
        afterSlideChange: function() {
            var currentNum = $(this).index() + 1;
            var count = $(this).closest('.featured').find('img').length;
        }
    });    
});

您如何找到将标题放在哪里取决于您的 HTML 的外观,但上述内容应该适用于在任何幻灯片中每次更改时查找相关信息。

带有多个幻灯片的工作演示

于 2011-11-29T20:00:28.837 回答
0

根据触发事件,您可以使用 $().index(this)

或者以其他方式使用 index() 函数。

于 2011-11-29T20:16:34.460 回答