Question

I created a image loop by using jquery and it works fine. Here is my code.

$(document).ready(function(){
    $('.images').hide();    
    $('#image1').show('slide', {direction: 'right'}, 500);
    $('#image1').delay(2000).hide('slide', {direction: 'left'}, 500);
    var sc = $('#image img').size();
    var count = 2;
    setInterval(function(){
        $('#image'+count).show('slide', {direction: 'right'}, 500);
        $('#image'+count).delay(2000).hide('slide', {direction: 'left'}, 500);
        if(count == sc){
            count = 1;
        }else{
            count = count + 1;
        }
    }, 3000);

    $('.name').click(function(){
        var name = $(this).attr('id');
        name = name.replace('name', '');
        count = name;
    });
});

Here is the html code.

                    <div id="image">
                        <img class="images" id="image1" alt="Image loop" src="image1.jpg" width="550px" height="400px"/>
                        <img class="images" id="image2" alt="Image loop" src="image2.jpg" width="550px" height="400px"/>
                        <img class="images" id="image3" alt="Image loop" src="image3.jpg" width="550px" height="400px"/>
                        <img class="images" id="image4" alt="Image loop" src="image4.jpg" width="550px" height="400px"/>
                        <img class="images" id="image5" alt="Image loop" src="image5.jpg" width="550px" height="400px"/>
                    </div>
                    <div id="name">
                        <div class="name" id="name1">
                            <img src="image1.jpg" width="80px" height="80px"/>
                        </div>
                        <div class="name" id="name2">
                            <img src="image2.jpg" width="80px" height="80px"/>
                        </div>
                        <div class="name" id="name3">
                            <img src="image3.jpg" width="80px" height="80px"/>
                        </div>
                        <div class="name" id="name4">
                            <img src="image4.jpg" width="80px" height="80px"/>
                        </div>
                        <div class="name" id="name5">
                            <img src="image5.jpg" width="80px" height="80px"/>
                        </div>

The css controls the name sets to the right. My idea is, click the small image on the right to immediately switch the image which user choose.

It seems working a little bit. The setInterval is still runing and the loop is ruined. How can I deal with this properly? Here is the jsfiddle link. Thanks!

Answer 1

The problem occurs because you change the type of count from a number to a string inside your click handler – when you assign name to count. I’ve edited your code to include parseInt.

    $('.name').click(function(){
    var name = $(this).attr('id');
    name = name.replace('name', '');
    count = parseInt(name, 10);  
});