gpt4 book ai didi

javascript - 循环 2 下一个和上一个按钮

转载 作者:行者123 更新时间:2023-12-03 11:22:55 24 4
gpt4 key购买 nike

我有一个周期 2 js 代码,它将每 15 秒更改一次图表。但是,如何包含下一个/上一个按钮以便用户可以单击他们想要的任何图表?

HTML 代码

<div id="chart1">
<div id="SummaryLineChart"></div>
</div>

<div id="chart2">
<div id="DailyBarChart"></div>
</div>

<div id="chart3">
<div id="PieChart"></div>
</div>

我的JS文件:

jQuery(function () {
var $els = $('div[id^=chart]'),
i = 0,
len = $els.length;

$els.slice(1).hide();
setInterval(function () {
$els.eq(i).fadeOut(function () {
i = (i + 1) % len
$els.eq(i).fadeIn();
})
}, 15000)
})

最佳答案

首先,我们将您的幻灯片幻灯片包装到一个容器中,并为每张幻灯片指定相同的类(稍后用作幻灯片选择器)。然后我们还包括一个滑动控件 div,其中包含上一个和下一个元素。您可以根据需要通过 css 定位它们。

<div id="slideContainer">
<div class="slide" id="chart1">
<div id="SummaryLineChart"></div>
</div>

<div class="slide" id="chart2">
<div id="DailyBarChart"></div>
</div>

<div class="slide" id="chart3">
<div id="PieChart"></div>
</div>
<div class="slideControls">
<div id="prev">prev</div>
<div id="next">next</div>
</div>
</div>

我最喜欢的无限幻灯片放映方法:

$("#slideContainer > .slide:gt(0)").hide(); //hide all slides, but the first

setInterval(function() { //start interval
$('#slideContainer > .slide:first') //select the first slide
.fadeOut(1000) //fade it out
.next() //select the next slide
.fadeIn(1000) //fade it in
.end() //end the current chain (first slide gets selected again)
.appendTo('#slideContainer'); //move first slide to the end
}, 15000);

这会创建一个无限幻灯片,其中第一张幻灯片始终是可见幻灯片。这使得处理当前事件幻灯片变得更加容易......

您的上一个/下一个函数将如下所示:

$("#next").on("click", function(){
$('#slideContainer > .slide:first') //select the first slide
.fadeOut(1000) //fade it out
.next() //select the next slide
.fadeIn(1000) //fade it in
.end() //end the current chain (first slide gets selected again)
.appendTo('#slideContainer'); //move first slide to the end
});

$("#prev").on("click", function(){
$('#slideContainer > .slide:first') //select the first slide
.fadeOut(1000); //fade it out
$('#slideContainer > .slide:last') //select the last slide
.fadeIn(1000) //fade it in
.prependTo('#slideContainer'); //move last slide to the beginning
});

关于javascript - 循环 2 下一个和上一个按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27033424/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com