Помогите с ползунком контента jQuery и автоматическим продвижением - PullRequest
Новая
       9

Помогите с ползунком контента jQuery и автоматическим продвижением

0 голосов
/ 15 марта 2011

Я мучился с этим 2 дня и все еще не мог получить желаемый результат. По сути, это простой слайдер с элементами управления «точка». Когда вы нажимаете на определенную точку, она переходит на этот слайд. И он также имеет автоматический таймер для автоматической прокрутки, когда не нажата.

До сих пор мне удавалось заставить работать автоматическую прокрутку, однако когда вы нажимаете на точку, она просто переходит к следующему слайду в строке вместо того, на котором я щелкнул. Это почти так, как будто точки просто функционируют как «следующий» элемент управления.

Так что, в конечном счете, я хочу, чтобы точки при щелчке переходили на этот конкретный слайд, а также, когда я щелкаю мышью, он продолжает автоматическую прокрутку, начиная со слайда, на котором он находится в данный момент.

Вот код, который у меня есть, и вы можете видеть, что он работает. http://jsfiddle.net/PGcY2/

Спасибо!

1 Ответ

1 голос
/ 15 марта 2011 
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 и вуаля, это работает как шарм!Удачи с вашим товарищем по проекту!

...