使用 jQuery 滾動文本

Question

我一直在嘗試創建一個文本滾動條來使用 jQuery一次顯示一個 div，我對此很陌生。

我使用了 div，並且一直在嘗試使用兩個按鈕（上一個和下一個）滾動瀏覽。 我無法弄清楚如何在保持滾動位置的同時滾動文本。

問題 1：如果我點擊下一個它工作正常，但是，在滾動過程中的任何給定點，當我點擊上一個時，輸出會變得一團糟，我真的被卡在這里了。

問題 2：滾動期間第一個和最后一個標題顯示兩次。 我已盡力解決此問題，但徒勞無功。

任何形式的幫助將不勝感激。 非常感謝您！

 jQuery(document).ready(function($) { var state = 0; function loadOne(state) {} function displayFirst(value) { $('.caption' + value).show(); } function hideall() { $('.caption').hide(); } function reset(value) { state = -1; } function updateCounter() { state = state + 1; } hideall(); //alert(state); $(".next-update").click(function() { state = state + 1; if (state >= 1 && state <= 5) { hideall(); $('.caption' + state).show(); } else { reset(state); } }); $(".prev-update").click(function() { state = state + 1; if (state >= 5 && state <= 1) { hideall(); $('.caption' + state).show(); } else { reset(state); } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="caption caption1">Hello 1</div> <div class="caption caption2">Hello 2</div> <div class="caption caption3">Hello 3</div> <div class="caption caption4">Hello 4</div> <div class="caption caption5">Hello 5</div> <button class="prev-update">Prev</button> <button class="next-update">Next</button>

Answer 1

希望以下代碼對您有用。

 $(window).ready(function(){ var state = 1; $(".caption").hide(); $(".caption.caption" + state).show(); $(".prev-update").click(function(){ if(state > 1){ state--; } $(".caption").hide(); $(".caption.caption" + state).show(); }) $(".next-update").click(function(){ if(state < 5){ state++; } $(".caption").hide(); $(".caption.caption" + state).show(); }) })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="caption caption1">Hello 1</div> <div class="caption caption2">Hello 2</div> <div class="caption caption3">Hello 3</div> <div class="caption caption4">Hello 4</div> <div class="caption caption5">Hello 5</div> <button class="prev-update">Prev</button> <button class="next-update">Next</button>