0

私は JavaScript の知識がほとんどなく、助けが必要です。カウントダウンが終了すると、画像を新しいものに置き換えるこのコード（以下）があります。

カウントダウンの代わりにボタン (img) が押されるように、これを変更したかったのです。アイデアを得るための私のデザインは次のとおりです。

今回は 1 つ (ボックスごとに 1 つ) ではなく 4 つのイメージローダーと、「古い ->」ボタンをクリックするとイメージの読み込みがトリガーされるようにするためのコードが必要になると思いますか?

<!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>

皆様、ありがとうございます。

4

0 に答える 0