javascript鼠标悬停/将图片从1改为10

时间:2012-12-10 00:12:45

标签: javascript javascript-events

我的计数器在10次后变为0。 记住我需要1到11或0! 我每次都需要一个新的jpg,例如test.1.jpg,test.2.jpg,test.3.jpg等等。

<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
        <script>
            $(document).ready(function() {

                var timer, counter = 1,
                    changepic = function(pic) {

                        var src = pic.attr("src");

                        counter = counter + 1;

                        if (counter == 11) { // <- i tested my if clauses but not working any ideas?maybe we can solve it with easy if clauses
                            counter = 1;
                        }

                        pic.attr("src", src.substring(0, src.lastIndexOf('.') - 1) + counter + ".jpg");

                    };

                $('img').hover(function() {

                    var $this = $(this);

                    timer = setInterval(function() {
                        changepic($this);
                    }, 1000);

                }, function() {
                    clearInterval(timer);
                });

            });
        </script>
    </head>
    <body>
        <table style="float:left;">
            <tr>
            <tr>
                <td><img src="pics/test.1.jpg" /><br />Text</td>
            </tr>
            </tr>
        </table>
    </body>
</html>

1 个答案:

答案 0 :(得分:1)

当计数器等于11时出现问题;

src.substring(0, src.lastIndexOf('.') - 1) + counter + ".jpg"; 
//test.1 + 1 + .jpg ---> test.11.jpg

尝试

src.replace(/\d{1,2}\.jpg$/, counter + ".jpg");