Question

我是javascript的新手。我需要你的帮助来解决这个问题。

我有一些我想要sliding的数据。在每个数据中有2个侧面，左侧和右侧。

左侧包含一些要滑动的图像，右侧有一篇文章，如果文章高度比框架高，它应该向上移动，所以我们可以看到所有文章。

在完成所有图像sliding/display并且文章完全可读后，它将移动到另一个数据。

我使用javascript命令setInterval更改每5秒内容，当达到5秒时，图像滑动，接下来的5秒到达，下一张图像滑动一次又一次，直到到达最后一张图片。

问题当到达最后一张图片但文章尚未全部显示时。

对这种情况有什么看法？如何使用clearInterval或setInterval，但时间会动态变化。

我的代码：

var slideIndex = 1;
var slideContentIndex = 1;
var slideDataIndex = 1;

var slide = $(".slide");
var slideData = $(".slide-data");
var slideContent = slide.find(".slide-content");

function sliding() {
  var slideLength = slide.length;
  var currentSlide = slide.parent().find(".slide.active");
  var slideDataLength = currentSlide.find(".slide-data").length;
  var currentSlideData = currentSlide.find(".slide-data.active");
  var slideContentLength = currentSlideData.find(".slide-content").length;
  var currentContentSlide = currentSlideData.find(".slide-content.active");

  if (slideContentIndex < slideContentLength) {
    currentContentSlide.removeClass("active").next().addClass("active");
    slideContentIndex += 1;
  } else {
    if (slideDataIndex < slideDataLength) {
      currentSlideData.removeClass("active").next().addClass("active").find(".slide-content").first().addClass("active");
      slideDataIndex += 1;
    } else {
      if (slideIndex < slideLength) {
        currentSlide.removeClass("active").next().addClass("active").find(".slide-data").first().addClass("active").find(".slide-content").first().addClass("active");
        slideIndex += 1;
      } else {
        currentSlide.removeClass("active");
        slide.first().addClass("active").find(".slide-data").first().addClass("active").find(".slide-content").first().addClass("active");
        slideIndex = 1;
      }
      currentSlideData.removeClass("active");
      currentSlide.find(".slide-data").first().addClass("active");
      slideDataIndex = 1;
    }
    currentContentSlide.removeClass("active");
    slideContentIndex = 1;
  }
}

$(document).ready(function() {
  var interval = setInterval(sliding, 5000);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="slide active">
  <h1>Enjiniring</h1>
  <div class="slide-data">
    <div class="col-md-6">
      <figure class="slide-content active">
        <img src="1478191814Picture5.png" style="max-width: 100%">
        <figcaption class="caption">some caption</figcaption>
      </figure>
      <figure class="slide-content">
        <img src="ip.png" style="max-width: 100%">
        <figcaption class="caption">some another caption</figcaption>
      </figure>
      <figure class="slide-content">
        <img src="great.jpg" style="max-width: 100%">
        <figcaption class="caption">some another caption</figcaption>
      </figure>
    </div>
    <div class="col-md-6">
      <div class="slide-frame">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce suscipit justo mi, at euismod tortor interdum vel. Duis tincidunt fermentum elementum. Etiam a lectus odio. Sed mollis sapien imperdiet, rutrum massa ut, porta purus. Nulla tincidunt
          elit ut lectus sagittis, ac porta lacus accumsan. Aliquam iaculis ipsum nec orci vestibulum, vitae tincidunt elit ullamcorper. Integer nibh nunc, euismod a metus nec, placerat consectetur mi. Vestibulum et nisi nibh. Phasellus sit amet molestie
          nisi, non sodales tellus. Vestibulum hendrerit lacus sem, eget eleifend sapien lacinia sit amet. Nam condimentum ligula eu nibh luctus tempor. Morbi convallis, eros ac congue laoreet, est erat gravida magna, non lobortis nibh turpis id justo.</p>
      </div>
    </div>
  </div>
  <div class="slide-data">
    <div class="col-md-6">
      <figure class="slide-content active">
        <img src="hello.png" style="max-width: 100%">
        <figcaption class="caption">logo indonesia power 2</figcaption>
      </figure>
      <figure class="slide-content">
        <img src="/app-visual/assets/upload_files/ip.jpg" style="max-width: 100%">
        <figcaption class="caption">logo indonesia power 3</figcaption>
      </figure>
    </div>
    <div class="col-md-6">
      <div class="slide-frame">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce suscipit justo mi, at euismod tortor interdum vel. Duis tincidunt fermentum elementum. Etiam a lectus odio. Sed mollis sapien imperdiet, rutrum massa ut, porta purus. Nulla tincidunt
          elit ut lectus sagittis, ac porta lacus accumsan. Aliquam iaculis ipsum nec orci vestibulum, vitae tincidunt elit ullamcorper. Integer nibh nunc, euismod a metus nec, placerat consectetur mi. Vestibulum et nisi nibh. Phasellus sit amet molestie
          nisi, non sodales tellus. Vestibulum hendrerit lacus sem, eget eleifend sapien lacinia sit amet. Nam condimentum ligula eu nibh luctus tempor. Morbi convallis, eros ac congue laoreet, est erat gravida magna, non lobortis nibh turpis id justo.</p>
      </div>
    </div>
  </div>
</div>
<div class="slide">
  <div class="slide-data"></div>
  <div class="slide-data"></div>
</div>

任何帮助表示赞赏。谢谢大家。

Answer 1

您应该将requstAnimationFrame用于与ui相关的所有内容。这样可以提供更流畅的用户体验，并且如果网页不可见（不是活动标签等），也会阻止显示更新

因此与setTimeout的工作方式相同。

如何clearInterval并根据当前活动动态更改setInterval中的时间

1 个答案: