如何創建帶有漸變效果的隨機變化段落？

Question

對於恐怖主題的網站，我應該創建一個包含評論的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> 

Answer 1

要使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> 

http://jsbin.com/pojoke/edit?html,css,js

Answer 2

為此，請使用setInterval事件並使div在display:none上display:none首先display:none

請試試

 $(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>