JS/jQuery:帮助修改代码来替换4张图片

JS/jQuery: Help modifying code to replace 4 images

本文关键字：替换 4张 代码 修改 jQuery 帮助 JS      更新时间：2023-09-26

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

有人能帮我做到这一点，也使它是点击按钮后触发(图像)。由于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>

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

很难理解您在这里要做什么，但它似乎是一种复杂的方式来交换一些图像?也许这样做会更容易:

$(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>

<!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>
相关文章：