Question

首先，我对javascript了解不多，并一直依靠Google来帮助我度过难关。我正在设计一个设计元素，我有几个标题和副标题需要同步循环（所以标题1与副标题1一致）。

我找到了这个codepen（https://codepen.io/maaviles/pen/olKxr）

var divs = $('div[id^="content-"]').hide(),
    i = 0;

(function cycle() { 

    divs.eq(i).fadeIn(400)
              .delay(1000)
              .fadeOut(400, cycle);

    i = ++i % divs.length;

})();

这适用于标题或副标题，但不适用于两者。我摆弄它的所有东西要么破坏了剧本，要么导致动画与副标题混淆了标题。我需要使用div，因为实际文本是从文本文件中提取的。

当我最初发布此问题时，我遇到了应该发布我的代码的回复。但是，它是更长页面的一部分。因此，我已经创建了自己的代码集，只使用了我们正在查看的元素，其中包含了一些格式。

我的笔可以在https://codepen.io/raining_hail/pen/aEBqKj

找到

为了澄清，我需要像标题一样让标题循环。

Answer 1

var divs = $('div[id^="content-"]').hide(),
  i = 0;
(function cycle() {
  divs
    .eq(i)
    .fadeIn(400)
    .delay(5000)
    .fadeOut(400, cycle);
  i = ++i % divs.length;
})();
var divs1 = $('div[id^="subtitle-"]').hide(),
  i = 0;
(function cycle() {
  divs1
    .eq(i)
    .fadeIn(400)
    .delay(5000)
    .fadeOut(400, cycle);
  i = ++i % divs1.length;
})();

Answer 2

第一：你需要将下一个代码添加到css中以隐藏默认的所有div

div[id^="subtitle-"] , div[id^="content-"]{
  display : none;
}

第二：你需要将cycle作为一个函数..两个函数都足够..将elements , i作为参数传递给elements元素和{{1}对于你需要开始的元素的索引..在你的情况下使用i从第一个元素开始

现在您可以在文档准备就绪时运行该功能

function cycle(el , i) {
  //alert(i);
  el
    .hide()
    .eq(i)
    .fadeIn(400)
    .delay(5000)
    .fadeOut(400, function(){
      i = ++i % el.length;
      cycle(el , i);
    });
}

$(document).ready(function(){
  var divs = $('div[id^="subtitle-"]');
  cycle(divs , 0);
  var titles = $('div[id^="content-"]');
  cycle(titles , 0);
});

$(document).ready(function(){
  var divs = $('div[id^="subtitle-"]');
  cycle(divs , 0);
  var titles = $('div[id^="content-"]');
  cycle(titles , 0);
});

function cycle(el , i) {
  //alert(i);
  el
    .hide()
    .eq(i)
    .fadeIn(400)
    .delay(5000)
    .fadeOut(400, function(){
      i = ++i % el.length;
      cycle(el , i);
    });
}

@import url("https://fonts.googleapis.com/css?family=Annie+Use+Your+Telescope");

html,
body {
  margin: 0;
  padding: 0;
  text-align: center;
  font-family: "Annie Use Your Telescope", cursive;
  font-weight: 700;
}
.topbox {width: 500px;
  height: 62px;
margin: 0 auto;
  overflow: hidden;
}
.box {
  box-sizing: border-box;
  border-style: dotted;
  border-width: 4px;
  border-color: #cf3d6a;
  width: 400px;
  margin: 0 auto;
  padding: 10px;
}

.heading {
  text-align: center;
  font-size: 42px;
  color: white;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), 
    1px 1px 2px rgba(0, 0, 0, 0.8),
    1px 1px 3px rgba(0, 0, 0, 0.8), 
    1px 1px 4px rgba(0, 0, 0, 0.8);
  overflow:
}

.subheading {
  text-align: center;
  text-align: center;
  font-size: 28px;
  color: white;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), 1px 1px 2px rgba(0, 0, 0, 0.8),
    1px 1px 3px rgba(0, 0, 0, 0.8), 1px 1px 4px rgba(0, 0, 0, 0.8);
}


div[id^="subtitle-"] , div[id^="content-"]{
  display : none;
}

注意：您可以使用此函数将其与其他元素一起使用，通过调用<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="topbox"> <div id="content-1" class="heading">Test Heading #1</div> <div id="content-2" class="heading">Test Heading #2</div> <div id="content-3" class="heading">Test Heading #3</div> <div id="content-4" class="heading">Test Heading #4</div></div> <div class="box"> <div id="subtitle-1" class="subheading animated rubberBand">Test Subheading #1</div> <div id="subtitle-2" class="subheading animated rubberBand">Test Subheading #2</div> <div id="subtitle-3" class="subheading animated rubberBand">Test Subheading #3</div> <div id="subtitle-4" class="subheading animated rubberBand">Test Subheading #4</div> </div>从0元素开始

如何让jQuery循环遍历多组文本？

2 个答案: