Question

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

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

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

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

谢谢！

Answer 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，它就像一个魅力！祝你的项目伙伴好运！

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

1 个答案: