Javascript 带JS的简单衰落div

我有：

在三个div之间循环，将它们一个淡入另一个

我很难让它正常工作，担心它何时重新启动（回到第一张幻灯片，idx 0）

我怎样才能让它正常工作

---

小提琴：

“严格使用”；
var obj=[{'id'：0，'review'：'Test1'，'author'：'Bob1'}，{'id'：1，'review'：'Test2'，'author'：'Bob2'}，{'id'：2，'review'：'Test3'，'author'：'Bob3'}]；
$（函数（）{
var html=''；
var first=真；
$.each（obj，function（i，v）{
html+=''；
html+=''+v.review+'
'；
html+='
'+v.author+'
'；
html+=''；
第一个=假；
})
$（'#review_container'）.html（html）；
循环视图（）；
var t_out；
var-idx=0；
函数cycleReviews（）{
清除超时（t_out）；
t_out=设置超时（函数（）{
console.log（idx）
$（'#review'+idx）.animate（{opacity:'0'}，函数（）{
$（'#review'+idx）.addClass（'hide'）；
$（'#review'+（idx+1））.css（'opacity'，'0.0'）.removeClass（'hide'）.animate（{opacity:'1.0'）；
idx++；
如果（idx==2）{
console.log（'reload'）
idx=0；
}
循环视图（）；
});
}, 2000);
}
});

客户评论
• ◦ ◦
快乐的客户
你把事情复杂化了一点。我对您的代码做了一些修改-添加了索引作为循环参数，对其进行了更改，这样您就不必查找前一个元素来隐藏它，而是隐藏所有元素并仅显示索引元素，删除了硬编码的元素数，等等。这里是：


“严格使用”；
var obj=[{'id'：0，'review'：'Test1'，'author'：'Bob1'}，{'id'：1，'review'：'Test2'，'author'：'Bob2'}，{'id'：2，'review'：'Test3'，'author'：'Bob3'}]；
$（函数（）{
var html=''；
var first=真；
$.each（obj，function（i，v）{
html+=''；
html+=''+v.review+'
'；
html+='
'+v.author+'
'；
html+=''；
第一个=假；
})
$（'#review_container'）.html（html）；
循环视图（0）；
var t_out；
函数循环视图（idx）{
清除超时（t_out）；
t_out=设置超时（函数（）{
console.log（idx）
if（idx==对象长度）{
console.log（'reload'）
idx=0；
}
$（'.review'）。动画（{opacity:'0'}，函数（）{
$（'.review'）.addClass（'hide'）；
$（'#review'+（idx））.css（'opacity'，'0.0'）.removeClass（'hide'）.animate（{opacity:'1.0'}）；
循环视图（idx+1）；
});
}, 2000);
}
});

客户评论
• ◦ ◦
快乐的客户
我喜欢干净，没有无用的ID和东西，

使用可点击的（并自动生成）项目符号

即使在悬停时暂停：


var obj=[{'id'：0，'review'：'Test1'，'author'：'Bob1'}，{'id'：1，'review'：'Test2'，'author'：'Bob2'}，{'id'：2，'review'：'Test3'，'author'：'Bob3'}]；
$（函数（）{
变量$ReviewContainer=$（“#review_container”），
$bulletsContainer=$（'.bullets'），
idx=0，
幻灯片=”，
子弹=”，
独立电视台；
$.each（obj，function（i，v）{
幻灯片+=''+v.review+'
'+v.author+'
'；
子弹+=''；
});
$ReviewContainer.append（幻灯片）；
$bulletsContainer.append（项目符号）；
幻灯片=$ReviewContainer.find（“>div”）；
项目符号=$bulletsContainer.find（“>span”）。在（“单击”，函数（）上{
idx=$（this.index（）；
showSlideIdx（）；
});
函数showSlideDX（）{
slides.removeClass（“active”）.eq（idx）.addClass（“active”）；
项目符号.removeClass（“活动”）.eq（idx）.addClass（“活动”）；
idx=++idx%obj.length；
}
函数play（）{itv=setInterval（showSlideIdx，2000）；}
函数stop（）{clearInterval（itv）；}
$（“.container”）。悬停（停止，播放）；
ShowSlideDX（）；//第一个
play（）；//开始！
});
#查看容器{
位置：相对位置；
高度：100px；
}
#查看容器>分区{
位置：绝对位置；
可见性：隐藏；
不透明度：0；
过渡：0.8s；
-webkit转换：0.8s；
}
#查看容器>分区活动{
能见度：可见；
不透明度：1；
}
.项目符号跨度{字体大小：50px；光标：指针；}
.bullets span.active:在{content:“•”；}之后
.项目符号范围：{内容：}之后◦";}

悬停可暂停
制作一个JSFIDLE或您的所有代码，这样我们就可以测试它并帮助您；）这是一种相当愚蠢的方式来制作像单个属性这样简单的东西的动画。我建议您删除所有这些，制作一个CSS关键帧动画以实现不透明度，并通过向元素添加类来运行它。将其设置为-1会使不sense@epascarello我正在处理它，因为idx由于某种原因不会返回到0。您更新finish回调中的id，并检查是否有两个在它之外。。。
    var t_out;
    var idx = 0;

    function cycleReviews() {
        clearTimeout(t_out);
        t_out = setTimeout(function () {
            console.log(idx)
            $('#review_' + idx).animate({opacity: '0'}, function () {
                $('#review_' + idx).addClass('hide');

                $('#review_'+ (idx+1)).css('opacity', '0.0').removeClass('hide').animate({opacity: '1.0'});
                idx++;
            });
            if(idx == 2) {
                console.log('reload')
                idx = -1;
            }
            cycleReviews();
        }, 2000);
    }