对于恐怖主题网站，我应该创建一个包含评论的div。
我想让评论在屏幕上停留几秒钟，然后逐渐淡出并被其他评论所取代。我对如何使用Jquery和absolute css展示位置获得所需效果有所了解，但我无法让代码完全符合我的要求。
google和这个网站上的一些例子让我想到了正确的方向，但是对于多个段落+随机放置都没有做得很好。 （如果访问者返回网站，他最后一次面对不同的评论）
我猜我需要一个数组..
$('#leftReview').fadeIn('fast').delay(1000).fadeOut('fast');#ReviewContainer{
width: 400px;
height: 400px;
margin: 0 auto;
border: 2px solid white;
color: white;
background-color: #000;
position: relative;
}
.leftReview{
position:absolute;
top:0;
left:0;
width:400px;
height:400px;
}<div id="ReviewContainer">
<div class="leftReview">
<h3>Review #1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id sem libero. Duis sit amet pretium sapien.</p>
</div>
<div class="leftReview">
<h3>Review #2</h3>
<p>Nam ut nunc id turpis consequat vestibulum eget sit amet arcu. Nullam nec pellentesque leo, eu pulvinar velit.</p>
</div>
<div class="leftReview">
<h3>Review #3</h3>
<p>Pellentesque sagittis justo sit amet odio commodo, in malesuada nulla elementum. Integer pretium, sem nec vehicula dapibus.</p>
</div>
<div class="leftReview">
<h3>Review #4</h3>
<p>Arcu elit scelerisque enim, vel tincidunt velit ex non dolor. Proin nec fringilla mi. Nunc commodo nulla vitae ipsum eleifend fermentum.</p>
</div>
</div>
答案 0 :(得分：3)
要随机化div，您需要使用Math.random函数来获取随机数。
$(document).ready(function() {
setInterval(rotate,1200);
})
var panels = $('.leftReview');
var arr = [];
var rand = getRandom(panels.length);
panels.eq(rand).fadeIn();
function rotate() {
var visible = panels.filter(':visible').fadeOut(function() {
panels.eq(getRandom(panels.length)).fadeIn();
});
}
function getRandom(length) {
if (arr.length == length) {
arr = [];
}
var rand = Math.floor(Math.random() * length);
if (arr.indexOf(rand) > -1) {
return getRandom(length)
}
arr.push(rand)
return rand;
}#ReviewContainer{
width: 400px;
height: 400px;
margin: 0 auto;
border: 2px solid white;
color: white;
background-color: #000;
position: relative;
}
.leftReview {
position:absolute;
top:0;
left:0;
width:400px;
height:400px;
display:none
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ReviewContainer">
<div class="leftReview">
<h3>Review #1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id sem libero. Duis sit amet pretium sapien.</p>
</div>
<div class="leftReview">
<h3>Review #2</h3>
<p>Nam ut nunc id turpis consequat vestibulum eget sit amet arcu. Nullam nec pellentesque leo, eu pulvinar velit.</p>
</div>
<div class="leftReview">
<h3>Review #3</h3>
<p>Pellentesque sagittis justo sit amet odio commodo, in malesuada nulla elementum. Integer pretium, sem nec vehicula dapibus.</p>
</div>
<div class="leftReview">
<h3>Review #4</h3>
<p>Arcu elit scelerisque enim, vel tincidunt velit ex non dolor. Proin nec fringilla mi. Nunc commodo nulla vitae ipsum eleifend fermentum.</p>
</div>
</div>
答案 1 :(得分：2)
为了实现这一点，请使用setInterval事件并首先在display:none上设置div
请尝试
$(document).ready(function() {
var id = 0;
var carrousel = setInterval(rotate,1200);
function rotate(){
if(id != $('.leftReview').length){
$('.leftReview').eq(id).fadeIn(100).delay(1000).fadeOut(100)
id++;
}
}
})#ReviewContainer{
width: 400px;
height: 400px;
margin: 0 auto;
border: 2px solid white;
color: white;
background-color: #000;
position: relative;
}
.leftReview{
position:absolute;
top:0;
left:0;
width:400px;
height:400px;
display:none
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ReviewContainer">
<div class="leftReview">
<h3>Review #1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id sem libero. Duis sit amet pretium sapien.</p>
</div>
<div class="leftReview">
<h3>Review #2</h3>
<p>Nam ut nunc id turpis consequat vestibulum eget sit amet arcu. Nullam nec pellentesque leo, eu pulvinar velit.</p>
</div>
<div class="leftReview">
<h3>Review #3</h3>
<p>Pellentesque sagittis justo sit amet odio commodo, in malesuada nulla elementum. Integer pretium, sem nec vehicula dapibus.</p>
</div>
<div class="leftReview">
<h3>Review #4</h3>
<p>Arcu elit scelerisque enim, vel tincidunt velit ex non dolor. Proin nec fringilla mi. Nunc commodo nulla vitae ipsum eleifend fermentum.</p>
</div>
</div>
随机视图更新
$(document).ready(function() {
var carrousel = setInterval(rotate,1200);
function rotate(){
id = Math.floor((Math.random() * $(".leftReview").length));
$('.leftReview').eq(id).fadeIn(100).delay(1000).fadeOut(100)
}
})#ReviewContainer{
width: 400px;
height: 400px;
margin: 0 auto;
border: 2px solid white;
color: white;
background-color: #000;
position: relative;
}
.leftReview{
position:absolute;
top:0;
left:0;
width:400px;
height:400px;
display:none
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ReviewContainer">
<div class="leftReview">
<h3>Review #1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id sem libero. Duis sit amet pretium sapien.</p>
</div>
<div class="leftReview">
<h3>Review #2</h3>
<p>Nam ut nunc id turpis consequat vestibulum eget sit amet arcu. Nullam nec pellentesque leo, eu pulvinar velit.</p>
</div>
<div class="leftReview">
<h3>Review #3</h3>
<p>Pellentesque sagittis justo sit amet odio commodo, in malesuada nulla elementum. Integer pretium, sem nec vehicula dapibus.</p>
</div>
<div class="leftReview">
<h3>Review #4</h3>
<p>Arcu elit scelerisque enim, vel tincidunt velit ex non dolor. Proin nec fringilla mi. Nunc commodo nulla vitae ipsum eleifend fermentum.</p>
</div>
</div>