1 
function anim() {
            clearTimeout(animTimeout);              
            $('#wrap .bullet').removeClass('active');
            imageindex++;
            $('#wrap .bullet:nth-child('+ imageindex +')').addClass('active');
            $('#wrap .images img').fadeOut();
            $('#wrap .images img:nth-child('+ imageindex +')').fadeIn();
            if($('#wrap .images img').length == imageindex) {
                imageindex = 0;
            }

    animTimeout = setTimeout(anim, 1500);
}

这就是功能。它确实改变了图片，非常好地淡入淡出。这是一个幻灯片，.bullet 只是一个圆圈，通过单击可以跳转到某个图片。

顺便说一下，此功能可以让您跳转到您选择的任何图片：

        $('#wrap .bullets a').click(function(e){
  e.preventDefault();
            $('#wrap .images img').stop().attr('style', '');
            imageindex = parseInt($(this).data('i') );
            anim();
        });

但是，我希望当前图片项目符号处于活动状态，因此您不要说跳到上一张图片等...

anim() 函数给我的效果是，在第一张幻灯片上，所有的“.bullet”-s 都获得了一个 active 类，并且从第二张幻灯片中它们不再拥有它，直到它回到第一张幻灯片再次。为什么是这样？如果 imageindex 正在增长，我认为没有理由这样做......感谢您的帮助！

4

2 回答 2

0

两件事可能是您问题的根源

1- 动画可能被触发多次 2- imageindex 不稳定

我建议您console.log('anim with ' + imageindex)在 anim 的开头添加语句以检查 anim 被调用的次数和 imageindex 的值

还要确保你在使用它的任何其他 js 函数之上声明你的 imageindex 变量。

于 2012-12-20T11:50:14.393 回答
0

在你的情况下，我会替换你的全局变量 imageIndex ，这不是你想要实现的目标。

用这段代码替换它：

var animTimeout = null;

function anim() {
    clearTimeout(animTimeout);
    var activeIndex = $('#wrap .bullet.active') // select the active bullet
                         .removeClass('active') // remove its 'active' class
                         .next().addClass('active') // put 'active' class to the next item
                         .index(); // retrieve the new active item index
    if (activeIndex < 0) {
        // if end of list reached, put it on the first item
        activeIndex = $('#wrap .bullet').first().addClass('active').index();
    }
    // cancel previous animations before starting fadeOut and fadeIn
    $('#wrap .images img').stop().fadeOut().eq(activeIndex).fadeIn();
    animTimeout = setTimeout(anim, 1500);
}

$('#wrap .bullets a').click(function(e) {
    $('#wrap .images img').stop().attr('style', '');
    $('#wrap .bullet').removeClass('active');
    $('#wrap .bullet').eq($(this).parent().index() - 1).addClass('active');
    anim();
});
于 2012-12-20T12:55:45.880 回答