Question

我刚刚开始使用JQuery库，到目前为止我很享受它。我在这里询问是否有办法压缩下面的代码。乍一看，它看起来像很多复制/粘贴，但这是我真正考虑这样做的唯一方法。关于我想要完成的事情的信息：没有控件的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);

这是我在Stack Overflow上的第一篇文章，所以请给我反馈。

Answer 1

您可以为所有元素添加一个公共类（例如＆＃39; image＆＃39;）。在if语句之前，您可以调用

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

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

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

我也无法打开链接.. :(

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

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

我们在这里讨论了#i; .image＆＃39;用图像编号来获取类名。您必须遵循此类命名格式才能使其正常工作。

Answer 2

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

}, 10000);

Answer 3

您可以使用switch语句，然后在开始时从所有html img标记中删除活动类[假设页面中只有用于此目的的图像标记，如果没有给出一个更常见的类对于所有图像并将$(img).removeClass行替换为类名]，并根据案例为所需图像指定活动类。

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 4

也可以将此选项抛出。您始终可以利用jQuery的next()和first()方法来遍历DOM树中的IMG元素。要使其循环，您可以检查是否为下一个IMG元素返回了任何内容，如果没有，则:first将告诉它移回树中的第一个IMG元素。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

JQUERY幻灯片代码浓缩

4 个答案: