Question

我有一个滑块，底部有链接，想要在点击时更改幻灯片。让“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");

});

这是小提琴：http://jsfiddle.net/k4EU9/

Answer 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。

滑块链接改变不加入

1 个答案: