Advance slideshow manually with jquery

问题

please be easy - first post!

Looking to modify the following script: http://jonraasch.com/blog/a-simple-jquery-slideshow

Love it's simplicity, trying to find a way to add an advance function

Preferably on the img or div - on click or from a link.

Any suggestions?

Appreciate the help

edit, below is the script and here is a link to a working version:

link to a live testing page

script:

function slideSwitch() {
var $active = $('#slideshow IMG.active');

if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

// use this to pull the images in the order they appear in the markup
var $next =  $active.next().length ? $active.next()
    : $('#slideshow IMG:first');

// uncomment the 3 lines below to pull the images in random order

// var $sibs  = $active.siblings();
// var rndNum = Math.floor(Math.random() * $sibs.length );
// var $next  = $( $sibs[ rndNum ] );


$active.addClass('last-active');

$next.css({opacity: 0.0})
    .addClass('active')
    .animate({opacity: 1.0}, 1000, function() {
        $active.removeClass('active last-active');
    });
}

$(function() {
setInterval( "slideSwitch()", 5000 );

});

style:

#slideshow {
position:relative;
height:350px;
}

#slideshow IMG {
position:absolute;
top:0;
left:0;
z-index:8;
opacity:0.0;
}

#slideshow IMG.active {
z-index:10;
opacity:1.0;
}

#slideshow IMG.last-active {
z-index:9;
}

html:

<div id="slideshow">
        <img src="image01.jpg" width="262" height="496" border="0" class="active" />
        <img src="image02.jpg" width="262" height="496" border="0" />
        </div>

回答1:

We could do this by changing the interval to a timeout, which gives us an id which we can reset at will. Then we can use a click even to reset this interval and advance manually, which in turn will start up the interval again.

Using the simplest example on jonraasch.com:

window.slideInterval = null;

function slideSwitch() {
    var $active = $('#slideshow IMG.active');
    var $next = $active.next();    

    $next.addClass('active');

    $active.removeClass('active');

    window.slideInterval = setTimeout('slideSwitch()', 5000 )
}

jQuery(function() {
    window.slideInterval = setTimeout('slideSwitch()', 5000 );
});

$(el).click(function(){
    // reset interval
    clearTimeout(window.slideInterval);

    // trigger next slide manually
    slideSwitch();
});

Edit

Over the weekend I had the time to put some more attention to this, and I read up on the best practices in making a jQuery plugin. Code is slightly documented, but all in all fairly standard and not very complex, though has a fair bit of juggling with variables :)

If you use anything you should use this.

http://jsfiddle.net/sg3s/RFJMy/214/

btw, you can just delete the prev and rand functions if you don't want to use them, start, stop, init and transit to make the whole work.

回答2:

That particular sample already has an advance function built in: slideSwitch. This function is called in a setInterval loop to advance the slide show. All you need to do is hook up that method to your button click and you should be good to go.

HTML:

<div id="advanceShow">Click to Advance</div>

JavaScript

$(document).ready(function() {
  $('#advanceShow').click(function() {
    slideShow();
  });
});

来源：https://stackoverflow.com/questions/7615850/advance-slideshow-manually-with-jquery

标签

jquery

onclick

slideshow