帮助jQuery内容滑块和自动前进

时间:2011-03-15 20:36:06

标签: jquery timer slider

我已经在这里坚持了2天,仍然无法得到我想要的结果。基本上它是一个带有“点”控件的简单内容滑块。单击某个点时,它将转到该幻灯片。它还有一个自动前进计时器,可在未单击时自动滚动。

到目前为止,我已经能够使自动滚动工作,但是当您点击该点时,它只会转到下一张幻灯片,而不是我点击的特定幻灯片。这几乎就像点是“下一个”控件一样。

所以最终我想要点击进入特定幻灯片的点数,并且当我鼠标移出时,它会继续从当前打开的幻灯片开始自动滚动。

这是我到目前为止的代码,你可以看到它正在运行。 http://jsfiddle.net/PGcY2/

谢谢!

1 个答案:

答案 0 :(得分: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);

你走了!在JSFiddle中尝试一下。您没有设置当前的滑块元素。我做了de current var global和voila,它就像一个魅力!祝你的项目伙伴好运!