帮助jQuery内容滑块和自动前进 [英] Help with jQuery content slider and auto advance

问题描述

我已经为此努力了2天，但仍然无法获得想要的结果.基本上，它是带有点"控件的简单内容滑块.当您单击某个点时，它将转到该幻灯片.此外，它还具有一个自动前进计时器，可以在未单击时自动滚动.

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.

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

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

谢谢！

推荐答案

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，它的工作原理很像魅力！和您的项目伙伴一起祝你好运！

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!

这篇关于帮助jQuery内容滑块和自动前进的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！