问JQUERY幻灯片代码压缩
EN

Stack Overflow用户

提问于 2015-05-17 20:48:17

回答 4查看 44关注 0票数 0

我刚刚开始使用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);

这是我关于堆栈溢出的第一篇文章，所以请给我反馈。

slideshow

javascript

jquery

回答 4

Stack Overflow用户

回答已采纳

发布于 2015-05-17 21:14:46

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

}, 10000);

票数 1

Stack Overflow用户

发布于 2015-05-17 20:57:12

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

在这里，我们将“.image”与图像编号连接起来，以获得类名。您必须遵循这个类的命名格式才能让它正常工作。

票数 1

Stack Overflow用户

发布于 2015-05-17 20:56:32

您可以使用开关语句，然后在开始时从所有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);