在 HTML 小說中,經常會出現輪轉的效果,比如一個人物說出了一句話,然后屏幕滾動,接著另一個人物開口說話。這種效果可以通過一段簡單的 HTML 代碼實現。
<div id="rotate"> <p>人物 A:這里是人物 A 的臺詞</p> <p>人物 B:這里是人物 B 的臺詞</p> <p>人物 C:這里是人物 C 的臺詞</p> </div> <script> var i = 0; var p = document.querySelectorAll('#rotate p'); function rotate() { p[i].style.display = 'none'; i = (i + 1) % p.length; p[i].style.display = 'block'; } setInterval(rotate, 2000); // 每 2 秒鐘切換一次臺詞 </script>
這段代碼定義了一個 id 為 "rotate" 的 div 元素,其中包含了三個 p 元素,分別是人物 A、人物 B 和人物 C 的臺詞。同時,還定義了一個 JavaScript 函數 rotate(),用來實現輪轉效果。
rotate() 函數首先隱藏當前顯示的 p 元素,然后計算出應該顯示哪個 p 元素(通過取余運算來實現循環),最后將新的 p 元素顯示出來。借助 setInterval() 函數,可以每隔一定時間自動調用 rotate() 函數,從而實現臺詞輪轉的效果。