JQUERY 幻灯片代码压缩

Question

我刚刚开始使用 JQuery 库，到目前为止我非常喜欢它。我在这里问是否有一种方法可以压缩下面的代码。乍一看，它看起来像很多 copy/paste，但这是我真正考虑这样做的唯一方法。有关我要完成的工作的信息：没有控件的 3 图像幻灯片。该代码工作得很好，但我相信有更好的方法来解决它。

http://recordit.co/lTHpE25ukQ

setInterval(function(e){
    image += 1

    if(image == 4) {
        image = 1
    }

    if( image == 1) {
        $('.image1').addClass('active');
        $('.image2').removeClass('active');
        $('.image3').removeClass('active');
        $('.image4').removeClass('active');
    }

    if( image == 2) {
        $('.image1').removeClass('active');
        $('.image2').addClass('active');
        $('.image3').removeClass('active');
        $('.image4').removeClass('active');
    }

    if( image == 3) {
        $('.image1').removeClass('active');
        $('.image2').removeClass('active');
        $('.image3').addClass('active');
        $('.image4').removeClass('active');
    }
}, 10000);

这是我第一次 post 在 Stack Overflow 上，所以请给我反馈。

Answer 1

您可以使用 switch 语句，然后在开始时从所有 html img 标签中删除 active class [假设只有图像标签用于此页面中的目的，如果没有为所有图像提供一个更常见的 class 并将 $(img).removeClass 行替换为 classname] 并根据情况分配活动 class 只需要图片。

setInterval(function(e){
    image += 1
    if(image == 4) {
        image = 1
    }
    $(img).removeClass('active'); //Remove active class from all the images
    switch(image)
    {   
        case 1:$('.image1').addClass('active');
               break;
        case 2:$('.image2').addClass('active');
               break;
        case 3:$('.image3').addClass('active');
               break;
        default:image=1; 
                break;
    }
}, 10000);

Answer 2

您可以为所有元素添加一个公共 class（比如 'image'）。在 if 语句之前，您可以调用

$('.image').removeClass('active');

在您可以调用的每个 if 语句中，

$('.imageN').addClass('N');    // N being the number

我也无法打开 link.. :(

编辑---- 在更冒险的方法中，您可以执行以下操作。

$("img[class*='image']").removeClass('active');   // selects elements with class name starting with 'image'
var imgClass = '.image' + image;
$(imgClass).addClass('active');

这里我们将'.image'和图片编号连接起来得到class名称。您必须遵循此 class 命名格式才能正常工作。

Answer 3

setInterval(function(e)
{
    image += 1;
    if(image == 5){
        image = 1
    }
    $('.active').removeClass('active');
    $('.image'+image).addClass('active');

}, 10000);

Answer 4

也只是把这个选项扔在那里。您始终可以利用 jQuery 的 next() and first() 方法在 DOM 树中移动 IMG 元素。要使其循环，您可以检查是否为下一个 IMG 元素返回任何内容，如果没有，则 :first 将告诉它移回树中的第一个 IMG 元素。

$(document).ready(function() {
  setInterval(function() {
    var $active = $('#slideshow img.active');
    var $next = $active.next().length ? $active.next() : $('#slideshow img:first');
    $next.addClass('active');
    $active.removeClass('active');
  }, 3000);
});

#slideshow {
  position: relative;
  height: 600px;
}
#slideshow img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 8;
}
#slideshow img.active {
  z-index: 10;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slideshow">
  <img src="http://dummyimage.com/600x400/000/fff&text=Test+1" alt="" class="active" />
  <img src="http://dummyimage.com/600x400/000/fff&text=Test+2" alt="" />
  <img src="http://dummyimage.com/600x400/000/fff&text=Test+3" alt="" />
</div>

JQUERY 幻灯片代码压缩

JQUERY slideshow code condense

javascript

jquery

slideshow