Javascript 图像滑块按钮未启动

我正在制作一个图像滑块，你可以通过“上一个”和“下一个”按钮浏览它们。实际上，它是一个非常简单的滑块，但我只是从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>

---

剧本不起作用。我的意思是，当我单击其中一个按钮时，它们什么也不做，我不知道问题是脚本还是html css文件。

必须对滑块内的所有图像使用公共类名。。在添加class

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" />

$(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');
    });
});

---

你想让他们做什么？您只是在添加/删除类。请发布您的滑块内容。。我指的是html页面中的图像和箭头图像代码？？那就只有我们能查了。。

$(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');
    });
});