我正在使用名为superslides的滑块。我正在尝试显示当前幻灯片和幻灯片数量,这些幻灯片会在下一次单击“上一个”时自动递减和递增。到目前为止,我有以下代码;
var totalItems = $('.slides-container img').length;
var currentIndex = $('div.slide-active').index() + 1;
$('.num').html(''+currentIndex+'/'+totalItems+'');
$('#multiple-slides').superslides({
hashchange: false,
pagination: false,
animation: 'fade',
play: 4000,
});
$('#multiple-slides').bind('animated.slides', function() {
currentIndex = $('div.slide-active').index() + 1;
$('.num').html(''+currentIndex+'/'+totalItems+'');
});
我认为这样可行,只要我能将活动类(在我的情况下为.slide-active)应用于活动幻灯片。
示例 - http://www.smallbone.co.uk/collections/kitchens/macassar(参见右侧幻灯片)
答案 0 :(得分:0)
只需为当前幻灯片创建一个变量。做类似的事情:
var sliderLength = $('.slides-container img').length;
var currentSlide = 1;
然后你可能会有下一张幻灯片和之前的幻灯片功能。我不知道。而你只需在相应的函数中增加/减少currentSlide
的值,例如
function nextSlide() {
// Do some stuff
currentSlide++;
}
和
function prevSlide() {
// Do some stuff
currentSlide--;
}
然后,您可以使用新的当前幻灯片使用简单的
更新DOM$(".current-slide").html("<p>" + currentSlide + "/" + sliderLength + "</p>");
或其他..
答案 1 :(得分:0)
var g = document.getElementById('my_div');
for (var i = 0, len = g.children.length; i < len; i++)
{
(function(index){
g.children[i].onclick = function(){
alert(index + "/7") ;
}
})(i);
}