Question

I need to have this counter pause {stay on current div) while mouseover or hover and resume counter when mouseout. I have tried many ways but still new to jQuery API.

<div id="slide_holder">
<div id="slide1" class="hidden">
<img src="images/001.jpg" class="fill">
</div>
<div id="slide2" class="hidden">
<img src="images/002.png" class="fill">
</div>
<div id="slide3" class="hidden">
<img src="images/003.jpg" class="fill">
</div>

    <script>
        $(function () {

            var counter = 0,
                divs = $('#slide1, #slide2, #slide3');

            function showDiv () {
                divs.hide() // hide all divs
                    .filter(function (index) { return index == counter % 3; }) // figure out correct div to show
                    .fadeIn('slow'); // and show it

                counter++;
            }; // function to loop through divs and show correct div


            showDiv(); // show first div    

            setInterval(function () {
                showDiv(); // show next div
            }, 3 * 1000); // do this every 10 seconds    

        });
        </script>

Answer 1

This should do the trick:

jsBin demo

$(function () {

    var counter = 0,
        divs = $('.slide'),  // add a class to your elements !!
        divsN = divs.length, // will return a number of elements in collection
        intv;                // add this

    function showDiv () {
        divs.hide().eq(counter++%divsN).fadeIn('slow'); // wow! :)    
    }                        // <-- remove ';'
    showDiv();

    function auto(){         // create a function
        clearInterval(intv);
        intv = setInterval(function(){
            showDiv(); 
        }, 10000 );          
    }
    auto();                  // kick auto 'slide'

    divs.on('mouseenter mouseleave',function(e){
        var evt = e.type=='mouseenter' ? clearInterval(intv) : auto();
    });

});