我正在使用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 绝地 :(
谢谢!