2014-01-21 174 views
0

我在下面的幻燈片代碼工作正常。不過,我希望幻燈片可以通過點擊「上一步」和「下一步」按鈕/鏈接自動滾動到下面的代碼。請任何身體的幫助,我需要在下面的代碼,使幻燈片滾動沒有點擊上一頁和下一步按鈕。自動滾動幻燈片

HTML

<div style="text-align:center"><a href="#"><span id="prev">Prev</span></a> <a href="#"><span id="next">Next</span></a></div> 
<div id="slideshow"> 
    <img alt = "" src="images/beach1.jpg" /> 
</div> 

的Java/JQuery的

$(function() { 
// retrieve list of slides from server 
$.getJSON('slidelist.php', startSlideshow); 

function startSlideshow(slides) { 
    /* server returns an array of slides which looks like this: 
    [ 
     'images/beach2.jpg', 
     'images/beach3.jpg', 
     'images/beach4.jpg', 
     'images/beach5.jpg', 
     'images/beach6.jpg', 
     'images/beach7.jpg', 
     'images/beach8.jpg' 
    ] 
    */ 

    var totalSlideCount = 1 + slides.length; 

    var $slideshow = $('#slideshow'); 

    // markup contains only a single slide; before starting the slideshow we 
    // append one slide and prepend one slide (to account for prev/next behavior) 
    $slideshow.prepend('<img src="'+slides.pop()+'" />'); 
    $slideshow.append('<img src="'+slides.shift()+'" />'); 

    // start slideshow 
    $('#slideshow').cycle({ 
     fx: 'scrollHorz', 
     startingSlide: 1, // start on the slide that was in the markup 
     timeout: 0, 
     speed: 500, 
     prev: '#prev', 
     next: '#next', 
     before: onBefore 
    }); 


    function onBefore(curr, next, opts, fwd) { 
     // on Before arguments: 
     // curr == DOM element for the slide that is currently being displayed 
     // next == DOM element for the slide that is about to be displayed 
     // opts == slideshow options 
     // fwd == true if cycling forward, false if cycling backward 

     // on the first pass, addSlide is undefined (plugin hasn't yet created the fn yet) 
     if (!opts.addSlide) 
      return; 

     // have we added all our slides? 
     if (opts.slideCount == totalSlideCount) 
      return; 

     // shift or pop from our slide array 
     var nextSlideSrc = fwd ? slides.shift() : slides.pop(); 

     // add our next slide 
     opts.addSlide('<img src="'+nextSlideSrc+'" />', fwd == false); 
    }; 
}; 

});

回答

0

我認爲這應該做的伎倆(如果移動是在一個循環方向將工作良好)。

setInterval(function(){ $('#next').click();)}, 5000); 
+0

非常感謝您的回覆。請你簡單介紹一下,我應該把你的代碼行放在我的代碼中。 – kami

+0

@KamranRasheed,把它放在所有的功能之後。 –

+0

對不起我orel我試着按你說的,但它不工作:( – kami