jQuery Slider

Question

我正试图制作一个jquery滑块的一些问题。

关于jsf：jsfiddle.net/0hq91y5v/

我有五个点链接，我试图链接到每张幻灯片。我显然想要这样做，以便单击每个按钮将类更改为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');

    });

});