2

我创建了一个幻灯片，可以使用 jQuery 以一定间隔淡入和淡出图像。我在底部创建了一个导航区域，当您单击一个正方形时，它会显示该幻灯片。有两件事我需要帮助。

当您单击导航方块时，时间会关闭，直到它转到下一张自然幻灯片。

我需要当前幻灯片的正方形是不同的颜色。我一直在尝试向具有匹配 ID 的正方形添加一个类，但它没有添加一个类。

    $("#slideshow1 > div:gt(0)").hide();

var newvar = setInterval(function() { 
    var currentslide = $('.current').attr('id');
    $('#slideshow1 > div:first')
        .fadeOut(1000)
        .next()
        .addClass('current')
        .fadeIn(1000)
        .end()
        .removeClass('current')
    .appendTo('#slideshow1');
    $('.slider-nav').removeClass('active');
    $('.slider-nav[data-number=' + currentslide + ']').addClass('active');
},  5000);

$(".slider-nav").click(function(e){
    e.preventDefault();
    var currentID = $(this).attr('href');
    $('#slideshow1 > div:first').fadeOut(1000);
    $('div'+currentID).fadeIn(1000).nextAll("div.slide").addBack().prependTo("#slideshow1");
    $('.slider-nav').removeClass('active');
    $('.slider-nav[data-number=' + currentID + ']').addClass('active');
    clearInterval(newvar);
    newvar = setInterval(function() { 
        $('#slideshow1 > div:first')
            .fadeOut(1000)
            .next()
            .addClass('current')
            .fadeIn(1000)
            .end()
            .removeClass('current')
        .appendTo('#slideshow1');
        $('.slider-nav').removeClass('active');
        $('.slider-nav[data-number=' + currentID + ']').addClass('active');
    },  5000);
});

此幻灯片所在的网站： http: //saratoga.mspaceap.com/

4

2 回答 2

1

将 setInterval 分配给这样的变量：

$("#slideshow1 > div:gt(0)").hide();

var interval = setInterval(function() { 
    var currentslide = $('.current').attr('id');

    $('#slideshow1 > div:first')
        .fadeOut(1000)
        .next()
        .addClass('current')
        .fadeIn(1000)
        .end()
        .removeClass('current')
        .appendTo('#slideshow1');
    },  5000);
}

然后clearInterval像这样在你的点击处理程序中使用：

$(".slider-nav").click(function(e){
    e.preventDefault();
    var currentID = $(this).attr('href');
    $('#slideshow1 > div:first').fadeOut(1000);
    $('div'+currentID).fadeIn(1000).nextAll("div.slide").addBack().prependTo("#slideshow1");
    $('.slider-nav[id=' + currentID + ']').addClass('active');
    clearInterval(interval);
});

这样，您的间隔将在点击时重置。

于 2013-09-30T18:52:12.697 回答
1

你的问题在这里：

$('.slider-nav[id=' + currentID + ']').addClass('active');

因为currentID是一个类似于 , 的字符串#1，因为您之前将它设置为三行：

var currentID = $(this).attr('href');

要修复，请将您的代码更改为：

$('.slider-nav[id=' + currentID.substr(1) + ']').addClass('active')
    .siblings().removeClass('active'); // don't forget to do this

也就是说：您的导航元素和幻灯片不应具有相同的 ID。ID 应该始终是唯一的。我可以看到您正在使用 解决此问题.attr('id')，但这仍然是不好的做法。改用通用data-属性或 id 之类的nav1。

于 2013-09-30T18:52:19.433 回答