用于多次替换图像的 Jquery 按钮

Jquery buttons to replace image several times

本文关键字：Jquery 按钮 图像 替换 用于      更新时间：2023-09-26

标题可能措辞不佳，所以请解释我在这里的意思。

我有三个按钮，我想根据他们按下的内容替换div 的图像。例如，第一个图像将是森林。一个按钮将对应于进一步进入的选择，以便该按钮将该图像替换为另一个图像。一个按钮会让你拿起东西/去另一个地方，后一个选项用另一个选项替换当前图像，最后一个选项会让你头痒痒的。

让按钮替换一次图像没什么大不了的，但是如果您希望按钮在按下按钮后用新图像替换图像，我不明白您应该怎么做？

只需更改 css 背景图像：url 就像我在下面所做的那样。当您单击带有 id（id #grass）的按钮时，它基本上会更改页面中心部分（例如草的 url.jpg）的背景图像。我使图像名称和 Id 相同，只是为了使其更易于理解。希望对您有所帮助。

$('#grass').click(function(){
  $('.central').css('background-image', 'url("img/grass.jpg")');
});
$('#flower').click(function(){
  $('.central').css('background-image', 'url("img/flower.jpg")');
});
$('#forest').click(function(){
  $('.central').css('background-image', 'url("img/forest.jpg")');
});

我不确定是否完全理解您的问题。假设您要循环访问图像列表：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div id="imageDisplay"></div>
        <button id="previous" type="button" onclick="displayPrevious()" >previous</button>
        <button id="next" type="button" onclick="displayNext()" >next</button>
        <script>
            var imagesList = ['banana.png',
                              'apple.png',
                              'orange.png'];
            var currentIndex = 0;
            function displayPrevious() {
                if(currentIndex > 0) {
                    currentIndex--;
                    setBackGroundImage(imagesList[currentIndex]);
                }
            }

            function displayNext() {
                if(currentIndex < imagesList.length) {
                    currentIndex++;
                    setBackGroundImage(imagesList[currentIndex]);
                }
            }

            function setBackGroundImage(imageName) {
                var imageDisplayDiv = document.getElementById('imageDisplay');
                imageDisplayDiv.style.backgroundImage = "url('img/"+imageName+"')";
            }
        </script>
    </body>
</html>
相关文章：