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);
};
};
});
非常感謝您的回覆。請你簡單介紹一下,我應該把你的代碼行放在我的代碼中。 – kami
@KamranRasheed,把它放在所有的功能之後。 –
對不起我orel我試着按你說的,但它不工作:( – kami