时间戳

首页 > 解决方案 > 使用 jQuery 滚动文本

javascript - 使用 jQuery 滚动文本

问题描述

我一直在尝试使用 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>

标签： javascriptjquery

解决方案

希望以下代码对您有用。

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

推荐阅读