我有一个滑块,底部有链接,想要在点击时更改幻灯片。让“active”类处理两个元素,不能将它们连接在一起。
链接只有一个#LINK_NAME前缀
Jquery代码是:
var $slider = $('.home-slider'); // class or id of carousel slider
var $slide = 'li'; // could also use 'img' if you're not using a ul
var $transition_time = 1000; // 1 second
var $time_between_slides = 5000; // 5 seconds
jQuery(function ($) {
slides().fadeOut();
// set active classes
slides().first().addClass('active');
$('.nav-slider a').first().addClass('active');
slides().first().fadeIn(100);
// auto scroll
$interval = setInterval(sliderInterval, $transition_time + $time_between_slides);
$('.home-slider').hover(function () {
$interval = clearInterval($interval);
}, function () {
$interval = setInterval(sliderInterval, $time_between_slides);
});
});
function slides() {
return $slider.find($slide);
}
function sliderInterval() {
var $i = $slider.find($slide + '.active').index();
slides().eq($i).removeClass('active');
$('.nav-slider a').eq($i).removeClass('active');
slides().eq($i).fadeOut($transition_time);
$('.nav-slider a').eq($i+1).addClass('active');
if (slides().length == $i + 1) $i = -1; // loop to start
slides().eq($i + 1).fadeIn($transition_time);
slides().eq($i + 1).addClass('active');
}
// Handles navigation for each slide (placed in the nav div)
$('.nav-slider a').click(function() {
$('.nav-slider a').removeClass("active");
$(this).addClass("active");
});
答案 0 :(得分:1)
这应该做你需要的,找到点击链接的索引,然后用它来搜索滑块中的元素
$('.nav-slider a').click(function() {
$('.nav-slider a').removeClass("active");
$('.home-slider').find('.active').removeClass("active");
$('.home-slider').find('li:eq(' + $(this).index() + ')').addClass('active');
$(this).addClass('active');
});
更新了js fiddle here http://jsfiddle.net/k4EU9/1/
您需要做的就是添加您当前正在执行的display:list-item。