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

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屋！