-2

所以我有这段代码（如下）将替换一张图片。我需要对此进行修改，以便它将替换四个单独的图像，并在单击按钮（图像）后触发。

有人可以帮我做到这一点，也可以让它在点击按钮后触发（图片）。谢谢 x

这是我的代码：

<!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 type="text/javascript">

                $(document).ready(function() {

            function callback(imageLoader){


                $('#image').attr('src', imageLoader.nextImage());

            }

            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];;
                }
            }

            imageLoader = new ImageLoader(['img/wallpaper/2.png', 'img/wallpaper/3.png', 'img/wallpaper/6.png', 'img/wallpaper/10.png']);


            });
        </script>
    </head>

    <body>

        <img id="image" src="img/wallpaper/1.png">

    </body>
</html>

如果有帮助，这是我的设计

4

2 回答 2

0

很难理解你在这里想要做什么，但它似乎是一种交换一些图像的复杂方法？也许更像这样的事情会更容易：

$(document).ready(function() {
    var images = ['img/wallpaper/2.png', 
                  'img/wallpaper/3.png', 
                  'img/wallpaper/6.png', 
                  'img/wallpaper/10.png'
                 ];

    $('#buttonID').on('click', function() {
        $('.image').attr('src', function(i, src) {
            return images[i];
        }); 
    });
});

示例 HTML：

<body>
    <img class="image" src="img/wallpaper/1.png" />
    <img class="image" src="img/wallpaper/4.png" />
    <img class="image" src="img/wallpaper/7.png" />
    <img class="image" src="img/wallpaper/9.png" />
    <input type="button" id="buttonID" value="Change images" />
</body>
于 2013-04-23T04:09:21.080 回答
0 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            var 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];
                }
             }

             $(document).ready(function()
             {
                 imageLoader = new ImageLoader(
                 [
                     'img/wallpaper/2.png',
                     'img/wallpaper/3.png',
                     'img/wallpaper/6.png',
                     'img/wallpaper/10.png'
                 ]);

                 $('#change').on('click', function()
                 {
                     $('#image').attr('src', imageLoader.nextImage());
                 });
            });
        </script>
    </head>
    <body>
        <img id="image" src="img/wallpaper/1.png">
        <input type="button" id="change" value="Change" />
    </body>
</html>
于 2013-04-23T04:10:37.517 回答