jquery 切换图片

原创

mob649e816138f5 2023-08-01 22:40:36 ©著作权

文章标签 jQuery HTML html 文章分类 jQuery 前端开发

©著作权归作者所有：来自51CTO博客作者mob649e816138f5的原创作品，请联系作者获取转载授权，否则将追究法律责任

jQuery切换图片

jQuery是一种广泛使用的JavaScript库，用于简化HTML文档操作、事件处理、动画效果等。在网页开发中，经常会遇到需要切换图片的需求，而使用jQuery可以轻松实现这一功能。本文将介绍如何使用jQuery来切换图片，并提供代码示例。

1. 包含jQuery库

首先，我们需要在HTML文件中引入jQuery库。可以通过以下方式来包含：

<script src="

这段代码将从CDN引入最新版本的jQuery库。如果你已经下载了jQuery的本地版本，可以使用以下方式来引入：

<script src="path/to/jquery.min.js"></script>

确保在引入jQuery之前，先引入了jQuery库。

2. HTML结构

接下来，我们需要创建一个HTML结构来显示切换的图片。可以使用以下代码作为示例：

<div id="image-container">
  <img src="path/to/image1.jpg" alt="Image 1" id="image">
  <button id="change-button">切换图片</button>
</div>

这段HTML代码中，我们创建了一个包含图片和切换按钮的容器。图片的起始路径为"image1.jpg"，并设置了一个id为"image"，用于在jQuery代码中进行操作。切换图片的按钮的id为"change-button"。

3. jQuery代码

现在，我们可以编写jQuery代码来实现切换图片的功能。以下是一个简单的示例：

$(document).ready(function() {
  $('#change-button').click(function() {
    var currentImage = $('#image').attr('src');
    var newImage;

    if (currentImage === 'path/to/image1.jpg') {
      newImage = 'path/to/image2.jpg';
    } else {
      newImage = 'path/to/image1.jpg';
    }

    $('#image').attr('src', newImage);
  });
});

首先，我们使用$(document).ready()来确保在文档加载完成后再执行jQuery代码。然后，我们通过$('#change-button')来选中切换按钮，并使用.click()方法来为按钮添加点击事件。在点击事件中，我们获取当前图片的路径，并检查当前图片的路径是哪一张。如果当前图片路径为"image1.jpg"，则将新图片路径设置为"image2.jpg"，反之亦然。最后，我们使用$('#image').attr('src', newImage)将图片的路径更改为新的路径。