图像滑块按钮不触发

Question

我正在使用图像滑块，您可以在其中通过上一个和下一个按钮浏览它们。 实际上，这是一个非常简单的滑块，但是我只是从jQuery开始。 这是我的脚本：

$(document).ready(function () {
    var $active = $('.active');
    var $next = $active.next();
    var $prev = $active.prev();

    $('.next').click(function () {
        $next.addClass('active');
        $active.removeClass('active');
    })

    $('.prev').click(function () {
        $prev.addClass('active');
        $active.removeClass('active');
    })
});

//编辑

这是HTML：

<div id="imgslider">
        <img src="" class="active"/>
        <img src=""/>
        <img src=""/>
        <div class="slidercontrols">
            <div class="prev">&lsaquo;</div>
            <div class="next">&rsaquo;</div>
        </div>
    </div>

CSS：

    .active{
    z-index: 4;
}

    .prev, .next
{
    position: absolute;
    height: 80px;
    line-height: 55px;
    width: 50px;
    font-size: 100px;
    text-align: center;
    color: #fff;
    top: 50%;
    left: 0;
    z-index: 5;
    margin-top: -25px;
    cursor: pointer;
    opacity: .7;
    transition: all 150ms;
}

该脚本不起作用。 我的意思是，当我单击两个按钮中的任何一个时，它们什么都不做，并且我不知道问题出在脚本还是html-css文件。

Answer 1

您必须对滑块内的所有图像使用通用的类名。.在添加active类之前，您必须删除该滑块中的所有active类。 然后，您必须为当前滑块添加活动类。

HTML：

<img src="image/1.jpg" class="imageClass" />
<img src="image/2.jpg" class="imageClass active" />
<img src="image/3.jpg" class="imageClass" />

JS：

$(document).ready(function() {
    var $active = $('.active');
    var $next = $active.next();
    var $prev = $active.prev();

    $('.next').click(function() {
        //imageClass represents class name used for all images
        $('.imageClass').removeClass('active'); 
        $next.addClass('active');
    });

    $('.prev').click(function() {
        //imageClass represents class name used for all images
        $('.imageClass').removeClass('active');
        $prev.addClass('active');
    });
});