[英]Cycle 2 Next and Previous Button
I have a cycle 2 js code that will change the chart every 15 seconds. 我有一个周期2 js代码,它将每15秒更改一次图表。 However, how do I include a next/previous button so that user can click to any chart they want? 但是,如何包含下一个/上一个按钮,以便用户可以单击所需的任何图表?
HTML code 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>
My JS file: 我的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)
})
first of all, we wrap your slideshow slides into a container and give every slide the same class (used as slide selector later on). 首先,我们将您的幻灯片幻灯片包装到一个容器中,并为每个幻灯片提供相同的类(以后用作幻灯片选择器)。 then we also include a slide control div, with the previous and next elements. 然后我们还包括一个带有上一个和下一个元素的幻灯片控件div。 you can position them via css according to your needs. 您可以根据需要通过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>
my preferred infinite slideshow approach: 我首选的无限幻灯片方法:
$("#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);
this creates an infinite slideshow, where the first slide is always the visible slide. 这将创建一个无限的幻灯片,其中第一张幻灯片始终是可见的幻灯片。 this makes it a lot easier to address the current active slide... 这使得处理当前活动幻灯片更加容易...
your previous/next functions would look like that: 您以前的/下一个函数将如下所示:
$("#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
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.