JQUERY幻灯片代码浓缩

JQUERY slideshow code condense

本文关键字：代码 幻灯片 JQUERY      更新时间：2023-09-26

我刚刚开始使用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上的第一篇文章，所以请给我反馈。

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

您可以为所有元素添加一个公共类(例如'image')。在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');

我们在这里联系。使用图像编号获取类名。您必须遵循这个类命名格式才能使其工作。

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

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

只是把这个选项放在那里。您总是可以利用jQuery的next()和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>

相关文章：