Javascript 在jquery中创建div滑块

当我点击我正在建立的网站上的一段文字时，我试图改变图像。 此时，我创建了一个名为device的类，其中一个类处于设备活动状态，如下所示：

  <div class="col-md-3">
        <div class="device active">
          <img src="app/assets/images/mockup.png" alt="">
        </div>
        <div class="device">
          <img src="app/assets/images/mockup.png" alt="">
        </div>
        <div class="device">
          <img src="app/assets/images/mockup.png" alt="">
        </div>

    </div>

---

但是，这似乎并没有删除活动的类别，并且图像仍然显示？有什么想法吗

您的选择是正确的，它对我有效（活动类将从该项目中删除）。问题一定在代码中的其他地方

这里有一个替代方案：

var-activeDeviceIndex=0；
$（“#搜索2”）。单击（函数（）{
变量DeviceContainer=$（'.device'）；
$（DeviceContainer[activeDeviceIndex]）.removeClass（'active'）；
activeDeviceIndex==DeviceContainer.length-1？activeDeviceIndex=0:activeDeviceIndex++；
$（DeviceContainer[activeDeviceIndex]）.addClass（'active'）；
});
.device{
显示：无；
}
.device.active{
显示：块；
}

设备1

装置2

装置3

单击
检查以下内容，要单击的按钮上的id应该是
search2
，而不是
#search2
，可能只是打字错误

之后，按如下方式更新代码

/**
*@description - gets the next image to slide, if the last image is the current image, it will loop the sliding
*@param {Element} current - the currently active image
*@param {Boolean} islooped - boolean value indicating if a looping just started
*/
var nextImage = function(current, islooped) {
    var next = islooped? current : current.nextSibling;
    while(next && next.nodeName.toLowerCase() !== 'div') {
        next = next.nextSibling;
    }
    next = next? next : nextImage(current.parentNode.firstChild, true);
    return next;
};
$('#search2').bind('click', function(event) {
    var current = $('.device.active').removeClass('active').get(0);
    var next = nextImage(current, false);
    $(next).addClass('active');
});

这与
滑块有什么关系？@messervill一旦我可以删除此活动类，我将激活下一个图像并显示出来。请阅读此网站。我已经测试了此功能，它工作正常，当您单击“#搜索-2”时，该类将从第一个“.device”元素中删除。您确定正在单击id为“#search-2”的元素吗？检查
/**
*@description - gets the next image to slide, if the last image is the current image, it will loop the sliding
*@param {Element} current - the currently active image
*@param {Boolean} islooped - boolean value indicating if a looping just started
*/
var nextImage = function(current, islooped) {
    var next = islooped? current : current.nextSibling;
    while(next && next.nodeName.toLowerCase() !== 'div') {
        next = next.nextSibling;
    }
    next = next? next : nextImage(current.parentNode.firstChild, true);
    return next;
};
$('#search2').bind('click', function(event) {
    var current = $('.device.active').removeClass('active').get(0);
    var next = nextImage(current, false);
    $(next).addClass('active');
});