jQuery 滑块的问题

Question

我正在尝试制作的 jquery 滑块存在一些问题。

关于jsf：jsfiddle.net/0hq91y5v/

我有五个点 li 链接，我正试图链接到每张幻灯片。我显然想这样做，以便单击每个按钮将类更改为 activeDot 并从当前活动按钮中删除该类。我已经在 jquery 中尝试过，但它不起作用。

我还添加了一些代码来尝试在使用相同方法单击每个按钮后在不同幻灯片之间淡入淡出，方法是为每个按钮切换 activeSlide 类，但这也不起作用。

最后，看看我使用的代码，在单击相关按钮时添加和删除 activeSlide 类的更好/更语义化的方法是什么，而不是像我一样为每个按钮创建一个函数?

Answer 1

您还需要对当前的 jQuery 代码和标记进行一些更改。

看看fiddle

此代码将帮助您实现您所期望的行为，您可以根据需要添加fadeIn() 和fadeOut()。

$(document).ready(function() {

    var activeSlide = $('#homeSlider > .activeSlide');
    var activeDot = $('#homeSliderNav > ul > li.activeDot');

    $('#homeSliderNav > ul > li').click(function() {
        $('#homeSliderNav > ul > li').removeClass('activeDot');
        $(this).addClass('activeDot');
        $('.slide').removeClass('activeSlide');
        var slide = this.getAttribute('data-id');
        $('#' + slide).addClass('activeSlide');

    });

});