Help with jQuery content slider and auto advance

问题:

I've been hammering at this for 2 days and still could not get the result I want. Basically it is a simple content slider with "dot" controls. When you click a certain dot, it will go to that slide. And it also has a auto advance timer to auto scroll when not clicked.

So far I've been able to get the auto scroll to work however when you click on the dot, it just goes to the next slide in line instead of the specific one that I clicked on. It's almost as if the dots just functions as a "next" control.

So ultimately i want the dots when click to go to that particular slide and also would like when I mouse out, it continues to auto scroll starting from the slide it is currently on.

Here is the code I have so far and you can see it running. http://jsfiddle.net/PGcY2/

Thanks!

回答1:

var totWidth=0;
var positions = [];  
var current = 1;
jQuery('#home-slider .slide').each(function(i){

    positions[i]= totWidth;
    totWidth += jQuery(this).width();

});
jQuery('#home-slider').width(totWidth);
/* Change the cotnainer div's width to the exact width of all the slides combined */
jQuery('#slide_menu ul li a').click(function(e,keepScroll){


    jQuery('li.menuItem').removeClass('act').addClass('inact');
    jQuery(this).parent().addClass('act');

    var pos = jQuery(this).parent().prevAll('.menuItem').length;
    jQuery('#home-slider').stop().animate({marginLeft:-positions[pos]+'px'},350);

    /* Prevent the default action of the link */
    e.preventDefault();
    current = pos;

    // Stopping the auto-advance if an icon has been clicked:
    if(!keepScroll) {clearItvl();}
});

    var itvl = null;

    function autoAdvance() {
        if(current === -1) { return false; }
        jQuery('#slide_menu ul li a').eq(current%jQuery('#slide_menu ul li a').length).trigger('click',[true]);    
        current++;
        itvl = setTimeout(autoAdvance,3000);

    }
    function clearItvl() {
      clearTimeout(itvl);
      autoAdvance(); 
    }

 setTimeout(autoAdvance,3000);

Here you go! Try it in JSFiddle. You didn't set the current slider element. I made de current var global and voila, it works like a charm! Good luck with your project mate!