javascript - Javascript 用两组引用文本 silder
问题描述
我想用 2 组数据创建引号文本滑块。
小提琴链接-> https://jsfiddle.net/628r3t1h/
(function() {
var quotes = $(".quotes");
var quoteIndex = -1;
function showNextQuote() {
++quoteIndex;
quotes.eq(quoteIndex % quotes.length)
.fadeIn(1500)
.delay(1000)
.fadeOut(1000, showNextQuote);
}
showNextQuote();
})();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- set 1 -->
<h1 style="" class="sec1-head">Set 1<br/>
<span style="" class="quotes sec1-head-quotes">Text 1.1</span>
<span style="display: none;" class="quotes sec1-head-quotes">Text 1.2</span>
<span style="display: none;" class="quotes sec1-head-quotes">Text 1.3</span>
</h1>
<!-- set 2 -->
<h1 style="" class="sec1-head">Set 2<br/>
<span style="" class="quotes sec1-head-quotes">Text 2.1</span>
<span style="display: none;" class="quotes sec1-head-quotes">Text 2.2</span>
<span style="display: none;" class="quotes sec1-head-quotes">Text 2.3</span>
</h1>
此处Set 1应首先运行,然后Set 2应可见。而且这个循环必须继续。
解决方案
像这样?
const sets = $(".set");
let set = sets[0], quote = 0;
sets.hide();
$(sets[0]).fadeIn(1500);
function showQuote() {
if($(set).children().eq(quote).is(':last-child')) {
if($(set).hasClass("last")) {
set = $(".set").first();
} else {
set = $(set).next();
}
sets.hide();
$(set).fadeIn(1500);
quote = 1;
} else {
++quote
}
$(set).children().eq(quote)
.fadeIn(1500)
.delay(1000)
.fadeOut(1000, showQuote);
}
showQuote();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- set 1 -->
<h1 style="" class="sec1-head set">Set 1<br/>
<span style="" class="quotes sec1-head-quotes">Text 1.1</span>
<span style="display: none;" class="quotes sec1-head-quotes">Text 1.2</span>
<span style="display: none;" class="quotes sec1-head-quotes">Text 1.3</span>
</h1>
<!-- set 2 -->
<h1 style="" class="sec1-head set last">Set 2<br/>
<span style="" class="quotes sec1-head-quotes">Text 2.1</span>
<span style="display: none;" class="quotes sec1-head-quotes">Text 2.2</span>
<span style="display: none;" class="quotes sec1-head-quotes">Text 2.3</span>
</h1>
推荐阅读
- json - 无法在列表中存储数据
- node.js - net::ERR_FAILED zone-evergreen.js:2952
- r - 如何在注意数字是否曾经是负数的同时获得绝对值?
- java - 验证证书链时是否应将中间证书添加为 TrustAnchors?
- cordova - 如何在 PhoneGap / WebView 中精确控制字体大小,覆盖可能的设置?
- php - 将 PDF 作为附件发送以进行离线同步
- c++ - 如何终止 DLL 中的 log4cplus?
- python - 使用 tcsh 包装器收集 python 覆盖
- function - 更改整个 react-native 应用程序的语言
- swift - 如何使用swift在Macosx App中执行launchctl load start?