js、jquery图片动画、动态切换示例代码

下面是关于 "js、jquery图片动画、动态切换示例代码" 的详细攻略。

1. 简介

首先，图片动画是网页设计中非常重要的一部分，能够为网页提供更加生动、具有吸引力的效果。而 JavaScript 和 jQuery 是实现图片动画的最好选择。

2. 实现图片动画的具体代码

下面我们以两个示例代码的形式，帮助你快速学习如何使用 JavaScript 和 jQuery 实现图片动画。

示例 1: JavaScript 图片动画

以下是使用 pure JavaScript 实现的图片动画代码，该动画会不断循环播放图片数组中的图片。

// html中的img元素与这里的img数组一一对应
var img = [
  "img/1.jpg",
  "img/2.jpg",
  "img/3.jpg",
  "img/4.jpg"
];
var i = 0;
setInterval(function () {
  i = (i + 1) % img.length;
  document.getElementById("myImg").src = img[i];  // 替换img标签的src属性
}, 1000);

• 解释代码:
• 在 JavaScript 中，我们定义了一个 img 数组，存储了需要轮播的图片路径。
• 这里使用 setInterval() 方法，每隔 1 秒执行一次匿名函数。
• 匿名函数负责更新图片轮播的位置，具体地说，它会替换 id 为 myImg 的 img 元素的 src 属性。
• 注意， i 会在每轮循环中增加 1，我们使用了 % 运算符执行轮播数组操作符：i = (i + 1) % img.length; 判断 i 的值是否等于 img 数组的长度。如果是，则将 i 的值置零。

示例 2：jQuery 动态切换图片

以下是使用 jQuery 实现的动态切换图片代码，该代码包括鼠标悬停事件和点击事件。当用户悬停在某个小图上时，会变换主图，如果用户点击小图，则会直接显示对应的大图。

<!-- 目录结构 --> 
<!-- index.html -->
<!-- images大图目录 -->
<!-- images/thumbnails小图目录 -->

<!-- html代码 --> 
<a href="" id="big_picture">
  <img src="images/1.jpg" alt="img1">
</a>
<div id="thumbnails">
  <a href="" data-image="images/1.jpg">
    <img src="images/thumbnails/1.jpg" alt="thumb1">
  </a>
  <a href="" data-image="images/2.jpg">
    <img src="images/thumbnails/2.jpg" alt="thumb2">
  </a>
  <a href="" data-image="images/3.jpg">
    <img src="images/thumbnails/3.jpg" alt="thumb3">
  </a>
</div>

<!-- jQuery代码 --> 
$(document).ready(function () {
  $("#thumbnails a").mouseover(function () {
    var bigPic = $(this).attr("data-image");
    $("#big_picture img").attr("src", bigPic);
  });
  $("#thumbnails a").click(function (event) {
    event.preventDefault();
    var bigPic = $(this).attr("data-image");
    $("#big_picture img").fadeOut(200, function () {
      $(this).attr("src", bigPic).fadeIn(200);
    });
  });
});

• 解释代码:
• 我们需要将图片和其缩略图放到不同的文件夹中，方便代码管理。在此我们将主图片保存在 images 目录中，将所有缩略图保存在 images/thumbnails 目录中。
• 在 HTML 代码中，我们定义了一个 id 为 big_picture 的 a 标签，以及一个 id 为 thumbnails 的 div 容器，其中包含了大图及其所有缩略图。
• 当用户悬停在某个缩略图上时，会变换主图，当用户点击缩略图时，主图会立即切换到对应的图像。
• 这里用到了 jQuery 的 mouseover() 和 click() 事件，分别对应了鼠标悬停和鼠标点击事件。
• jQuery 代码分别使用了 attr()、fadeIn()、fadeOut() 方法来实现缩略图效果。

希望以上代码对你的图片动画实现有所帮助！