Question

我有一个循环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)
})

Answer 1

首先，我们将幻灯片幻灯片放入容器中，并为每个幻灯片提供相同的类（稍后用作幻灯片选择器）。然后我们还包括一个幻灯片控制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
});

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

1 个答案: