Question

我正在使用图像滑块，您可以在其中浏览prev和next按钮。实际上它是一个非常简单的滑块，但我只是从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');
    });
});

图像滑块按钮不会触发

1 个答案: