주기 2 다음 및 이전 단추

Question

15 초마다 차트를 변경하는주기 2 js 코드가 있습니다. 그러나 사용자가 원하는 차트를 클릭 할 수 있도록 다음/이전 단추를 어떻게 포함합니까?

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); 

이 첫 번째 슬라이드는 항상 눈에 보이는 슬라이드입니다 무한 슬라이드 쇼를 만듭니다.

이 http://jquery.malsup.com/cycle2/download에

$("#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 
});