Question

我对JavaScript知之甚少，需要一些帮助。我有这个代码（下面），当倒计时结束时，它会用新的代替图像。

我想修改它，以便不是倒计时 - 而是按下按钮（img）。以下是我的设计： Design 。

我猜我这次需要4个图像加载器而不是一次（每个盒子一个）和一些代码使得当“old - ＆gt;”时单击按钮会触发加载图像吗？

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript" charset="UTF-8"></script>
        <script src="js/jquery.countdown.js" type="text/javascript" charset="UTF-8"></script>
        <script type="text/javascript">
            <!-- The ready() function will force the browser to run wait running the javascript until the entire page has loaded -->
            $(document).ready(function() {

                // The jquery code for constructing and starting the counter
                // has been wrapped inside a function so we can call it whenever we want to
                function startCounter(imageLoader){
                    $('#counter_2').countdown({
                         image: 'img/digits.png',
                         startTime: '00:03',
                         timerEnd: function(){ callback(imageLoader) },
                         format: 'mm:ss'
                    })
                }

                // Takes care of whatever need to be done every time
                function callback(imageLoader){
                    // Replace image
                    $('#image').attr('src', imageLoader.nextImage());

                    // Clear the finished counter, so a new can be constructed in its place
                    $('#counter_2').empty();

                    // Construct a new counter and starts it
                    startCounter(imageLoader);
                }

                function ImageLoader(images){
                    this.images = images;
                    this.current = 0;
                    this.nextImage = function(){
                        this.current = (this.current+1) % this.images.length;
                        return this.images[this.current];;
                    }
                }

                // Fill in images in this array
                imageLoader = new ImageLoader(['img/turd.png', 'img/guitar.gif', 'img/carrot.jpg', 'img/puppy.jpg']);

                // Set everything off! (Construct a new counter and starts it)
                startCounter(imageLoader);
            });
        </script>
        <style type="text/css">
            div.counter{
                font-size: 36px;
                font-weight: bold;
                line-height: 77px;
            }
        </style>
    </head>
    <body>
        <div id="counter_2" class="counter"></div>
        <img id="image" src="img/turd.png" alt="Hot steaming turd">
    </body>
</html>

谢谢大家，我真的感到困惑，非常感谢你的帮助。

jQuery / Javascript：Button - 替换图像

0 个答案: