Как добавить индикатор выполнения (временную шкалу) к слайдеру, как слайды или нивослайдер

Question

Я хочу добавить индикатор прогресса в слайд-шоу JavaScript (например, SlidesJS или Nivoslider).

Я нашел этот вопрос , который охватывает кое-что из того, что мне нужно, но я не могу интегрировать его в мое слайд-шоу.

Вот примерто, что я после.

Например, когда я фокусирую слайд-шоу (или нажимаю кнопку паузы), временная шкала и слайдер останавливаются, и я могу возобновить (когда я ухожу).

Вот код, который у меня есть:

<div id="products_example">
    <div id="products">
        <div id="slides_timeline"></div>
        <div class="slides_container">
            <a href="http://www.zappos.com/pro-keds-royal-plus-lo-grey" target="_blank"><img src="img/1144953-3-2x.jpg" width="366" alt="1144953 3 2x"></a>
            <a href="http://www.zappos.com/pro-keds-royal-plus-lo-grey" target="_blank"><img src="img/1144953-1-2x.jpg" width="366" alt="1144953 1 2x"></a>
            <a href="http://www.zappos.com/pro-keds-royal-plus-lo-grey" target="_blank"><img src="img/1144953-2-2x.jpg" width="366" alt="1144953 2 2x"></a>
            <a href="http://www.zappos.com/pro-keds-royal-plus-lo-grey" target="_blank"><img src="img/1144953-4-2x.jpg" width="366" alt="1144953 4 2x"></a>
            <a href="http://www.zappos.com/pro-keds-royal-plus-lo-grey" target="_blank"><img src="img/1144953-5-2x.jpg" width="366" alt="1144953 5 2x"></a>
            <a href="http://www.zappos.com/pro-keds-royal-plus-lo-grey" target="_blank"><img src="img/1144953-6-2x.jpg" width="366" alt="1144953 6 2x"></a>
            <a href="http://www.zappos.com/pro-keds-royal-plus-lo-grey" target="_blank"><img src="img/1144953-p-2x.jpg" width="366" alt="1144953 P 2x"></a>
        </div>
        <ul class="pagination">
            <li><a href="#"><img src="img/1144953-3-2x.jpg" width="55" alt="1144953 3 2x"></a></li>
            <li><a href="#"><img src="img/1144953-1-2x.jpg" width="55" alt="1144953 1 2x"></a></li>
            <li><a href="#"><img src="img/1144953-2-2x.jpg" width="55" alt="1144953 2 2x"></a></li>
            <li><a href="#"><img src="img/1144953-4-2x.jpg" width="55" alt="1144953 4 2x"></a></li>
            <li><a href="#"><img src="img/1144953-5-2x.jpg" width="55" alt="1144953 5 2x"></a></li>
            <li><a href="#"><img src="img/1144953-6-2x.jpg" width="55" alt="1144953 6 2x"></a></li>
            <li><a href="#"><img src="img/1144953-p-2x.jpg" width="55" alt="1144953 P 2x"></a></li>
        </ul>
    </div>
</div>

$(function(){
    $('#products').slides({
        preload: true,
        preloadImage: 'img/loading.gif',
        effect: 'fade',
        slideSpeed:300,
        crossFade:true,
        fadeSpeed: 500,
        generateNextPrev: true,
        generatePagination: false,              
        play: 5000,
        hoverPause:true,
        animationStart: function(){animateTimeline();}, // Function called at the start of animation
        animationComplete: function(){}, // Function called at the completion of animation
        slidesLoaded: function() {} // Function is called when slides is fully loaded
    });
});

////reset timeline
function resetTimeline(){
    var timeline = $("#slides_timeline");
    timeline.css({width:'0'},0);
}

////animate timeline
function animateTimeline(){
    var timeline = $("#slides_timeline");
    timeline.stop().css({width:'0',opacity:1},0);
    timeline.stop().animate({width:'100%'},5000,'linear',function(){$(this).animate({opacity:0,width:0})});
}

$("#products .next,.pagination li a").click(function(){
    resetTimeline();
});

Answer 1

есть несколько разных способов сделать это, но на высоком уровне вот что я бы сделал:

Каждый из этих типов слайд-шоу, независимо от того, делаете вы это или нет, использует в основном функцию setIntervalи вы очищаете таймер или приостанавливаете его, когда наводите курсор мыши.Таким образом, у вас есть доступ к переменной где-то внутри функции, которая задает количество миллисекунд, которое вы хотите, чтобы каждый слайд показывал перед тем, как он движется, и setInterval запускает функцию, которая перемещается на следующий слайд.Я хотел бы получить доступ к этой переменной, а затем использовать ее для управления плагином jquery rotate, который можно микро контролировать вращением, используя миллисекунды в функции слайдера.

https://code.google.com/p/jqueryrotate/

Если вы хотитеСтиль индикатора выполнения, подобный приведенному в вашем примере, в основном вам нужно преобразовать в миллисекундах для каждого слайда в процент, например: (текущие / общие миллисекунды) * 100, а затем применить его в качестве ширины в процентах для индикатора выполнения, чтобы сделатьпохоже, что он оживляет поперек.