滑块链接改变不加入

时间:2013-12-02 09:43:41

标签: jquery hyperlink slider

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

1 个答案:

答案 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。