jQuery 点击箭头修改箭头图片

在前端开发中，我们经常需要实现一些交互效果来提升用户体验。其中，改变图片是一个常见的需求。本文将介绍如何使用 jQuery 来实现点击箭头修改箭头图片的效果。

准备工作

在开始之前，我们需要准备以下工作：

  1. 一个基本的 HTML 页面结构，包含一个箭头图片和两个按钮，分别用于向左和向右切换箭头图片。
  2. 引入 jQuery 库，确保可以使用其中的方法。

下面是一个基本的 HTML 页面结构示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 点击箭头修改箭头图片</title>
    <script src="
</head>
<body>
    <div class="container">
        <img src="arrow_right.png" alt="箭头图片" id="arrow-img">
        <button id="left-btn">向左</button>
        <button id="right-btn">向右</button>
    </div>

    <script src="script.js"></script>
</body>
</html>

修改箭头图片

首先，我们需要为按钮添加点击事件，当用户点击左按钮时，箭头图片向左旋转；当用户点击右按钮时，箭头图片向右旋转。我们可以使用 jQuery 的 click 方法来监听按钮的点击事件。

$(document).ready(function() {
  $('#left-btn').click(function() {
    rotateArrow('left');
  });

  $('#right-btn').click(function() {
    rotateArrow('right');
  });
});

在上述代码中，rotateArrow 函数接受一个参数 direction，用于指定旋转方向。根据旋转方向，我们可以使用 CSS 的 transform 属性来实现图片的旋转效果。

function rotateArrow(direction) {
  var angle = 0;
  if (direction === 'left') {
    angle -= 90;
  } else if (direction === 'right') {
    angle += 90;
  }

  $('#arrow-img').css('transform', 'rotate(' + angle + 'deg)');
}

在上述代码中，我们通过 $('#arrow-img') 选择器获取箭头图片的元素，并使用 css 方法来设置 transform 属性。通过改变 rotate 值，我们可以实现旋转效果。

修改箭头图片源

除了旋转图片，我们还可以根据点击事件来修改箭头图片的源。例如，当用户点击左按钮时，我们可以将箭头图片修改为向左的箭头图片；当用户点击右按钮时，我们可以将箭头图片修改为向右的箭头图片。

function changeArrow(direction) {
  var arrowImg = $('#arrow-img');
  var currentSrc = arrowImg.attr('src');

  if (direction === 'left' && currentSrc !== 'arrow_left.png') {
    arrowImg.attr('src', 'arrow_left.png');
  } else if (direction === 'right' && currentSrc !== 'arrow_right.png') {
    arrowImg.attr('src', 'arrow_right.png');
  }
}

在上述代码中，我们首先通过 attr 方法获取当前图片的源，然后根据点击事件和当前源的不同，使用 attr 方法来修改图片的源。

完整示例代码

$(document).ready(function() {
  $('#left-btn').click(function() {
    rotateArrow('left');
    changeArrow('left');
  });

  $('#right-btn').click(function() {
    rotateArrow('right');
    changeArrow('right');
  });
});

function rotateArrow(direction) {
  var angle = 0;
  if (direction === 'left') {
    angle -= 90;
  } else if (direction === 'right') {
    angle += 90;
  }

  $('#arrow-img').css('transform', 'rotate(' + angle + 'deg)');
}

function changeArrow(direction) {
  var arrowImg = $('#arrow-img');
  var currentSrc = arrowImg.attr('src');

  if (direction === 'left' && currentSrc !== 'arrow_left.png') {
    arrowImg.attr('src', 'arrow_left.png');
  } else if (direction === 'right' && currentSrc !== 'arrow_right.png') {
    arrowImg.attr('src', 'arrow_right.png');
  }
}

总结

通过使用