Javascript JS/jQuery：帮助修改代码以替换4个图像_Javascript_Jquery_Image

Javascript JS/jQuery：帮助修改代码以替换4个图像

javascript jquery image

Javascript JS/jQuery：帮助修改代码以替换4个图像,javascript,jquery,image,Javascript,Jquery,Image,因此，我有下面的代码，它将替换一张图像。我需要对此进行修改，以便它将替换四个独立的图像，并在单击按钮（图像）后触发有人可以帮我做这件事，并使其在点击按钮（图像）后被触发。谢谢x 这是我的代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="http://ajax.googleapis.com/ajax/libs/jqu

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

有人可以帮我做这件事，并使其在点击按钮（图像）后被触发。谢谢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>


$（文档）.ready（函数（）{
函数回调（imageLoader）{
$（'#image'）.attr（'src'，imageLoader.nextImage（））；
}
函数ImageLoader（图像）{
这个。图像=图像；
该电流=0；
this.nextImage=函数（）{
this.current=（this.current+1）%this.images.length；
返回this.images[this.current]；；
}
}
imageLoader=新的imageLoader（['img/wallper/2.png'，'img/wallper/3.png'，'img/wallper/6.png'，'img/wallper/10.png']）；
});

如果我的

有帮助的话，很难理解你想在这里做什么，但换掉一些图像确实是一种复杂的方式？也许像这样的事情会更容易：

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


var图像加载器；
函数ImageLoader（图像）
{
这个。图像=图像；
该电流=0；
this.nextImage=函数（）
{
this.current=（this.current+1）%this.images.length；
返回this.images[this.current]；
}
}
$（文档）.ready（函数（）
{
imageLoader=新的imageLoader(
[
“img/wallpaper/2.png”，
“img/wallpaper/3.png”，
“img/wallpaper/6.png”，
“img/wallpaper/10.png”
]);
$（“#更改”）。在（'click'，function（）上
{
$（'#image'）.attr（'src'，imageLoader.nextImage（））；
});
});

是！谢谢我该如何让它继续下去，比如当我第二次点击“更改图像”时，它会更改为另一组新的图像？还有，有没有可能有一个按钮可以让我“返回”，比如返回到第一组图像？x

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