基于Jquery实现焦点图淡出淡入效果-前端开发

我们来详细讲解一下如何基于Jquery实现焦点图淡出淡入效果。

我们来详细讲解一下如何基于Jquery实现焦点图淡出淡入效果。

准备工作

在开始教程之前，我们需要准备一些必要的工作和材料：

一个含有焦点图的网页，至少需要有两张图片。
一个Jquery库文件，可以从官网下载。
一个CSS文件，用来设置样式。
一份Javascript代码，实现焦点图的淡出淡入效果。

为了方便，我们可以将以上准备工作的文件放在同一个目录下。

编写HTML和CSS

在HTML文件中，我们需要添加一个<div>容器来存放焦点图，然后再在容器内添加图片和导航按钮等。

以下是一个简单的HTML代码示例：

<div class="slider">
  <img src="img1.jpg">
  <img src="img2.jpg">
  <img src="img3.jpg">
  <div class="nav">
    <span class="current"></span>
    <span></span>
    <span></span>
  </div>
</div>

以上代码中，.slider是焦点图容器，.nav是导航按钮容器。

接下来，我们需要编写一个CSS文件来设置样式：

.slider {
  width: 600px;
  height: 300px;
  position: relative;
}
.slider img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity .5s;
}
.slider img.active {
  opacity: 1;
}
.nav {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}
.nav span {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 5px;
  border-radius: 50%;
  background-color: #ccc;
}
.nav span.current {
  background-color: #555;
}

以上CSS代码中，我们设置了焦点图容器的宽和高，并将其设为相对定位。图片为绝对定位并且默认不可见，通过opacity属性实现淡入淡出效果。我们还设置了导航按钮的样式。

编写Javascript代码

在完成HTML和CSS的编写后，我们需要使用javascript代码来实现焦点图的自动切换和导航按钮的控制。

以下是一个简单的Javascript代码示例：

$(function() {
  // 设置变量
  var slider = $(".slider"),
      imgs = slider.find("img"),
      nav = slider.find(".nav"),
      navSpan = nav.find("span");
  var i = 0, // 图片索引
      n = imgs.length, // 图片总数
      duration = 3000, // 图片切换时间间隔
      intervalId; // 定时器ID

  // 切换图片
  function switchImg(i) {
    imgs.removeClass("active"); // 移除所有激活的样式
    imgs.eq(i).addClass("active"); // 指定对应图片添加激活样式
    navSpan.removeClass("current"); // 移除所有当前的样式
    navSpan.eq(i).addClass("current"); // 指定对应导航按钮添加当前样式
  }

  // 自动切换图片
  function autoSwitch() {
    // 设置定时器
    intervalId = setInterval(function() {
      i = (i + 1) % n; // 更新图片索引
      switchImg(i); // 切换图片
    }, duration);
  }

  // 初始化
  switchImg(i); // 切换到第一张图片
  autoSwitch(); // 自动切换图片

  // 鼠标移入停止切换图片
  slider.mouseenter(function() {
    clearInterval(intervalId); // 清除定时器
  });

  // 鼠标移出恢复自动切换图片
  slider.mouseleave(function() {
    autoSwitch(); // 自动切换图片
  });

  // 点击导航按钮切换图片
  navSpan.click(function() {
    i = $(this).index(); // 获取点击按钮的索引
    switchImg(i); // 切换图片
    clearInterval(intervalId); // 清除定时器
  });
});

以上Javascript代码中，我们使用$(function() {})来实现代码的自动执行，并定义变量、函数和事件来实现图片的自动切换和导航按钮的控制。

示例说明

下面我们来演示一下如何使用以上代码来实现一个焦点图淡出淡入效果。

首先，我们需要将HTML、CSS和Javascript代码按照以上规范编写，并保存在同一目录下。然后，我们可以在浏览器中打开HTML文件进行测试。

以下是一个示例：

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>焦点图淡出淡入效果</title>
  <link rel="stylesheet" href="style.css">
  <script src="jquery.js"></script>
  <script src="script.js"></script>
</head>
<body>
  <div class="slider">
    <img src="img1.jpg">
    <img src="img2.jpg">
    <img src="img3.jpg">
    <div class="nav">
      <span class="current"></span>
      <span></span>
      <span></span>
    </div>
  </div>
</body>
</html>

在浏览器中运行以上代码，就可以看到一个基于Jquery实现的焦点图淡出淡入效果了。

还可以根据需要对CSS和Javascript代码进行修改，以实现更加复杂的效果。