使用JQuery实现图片轮播效果的实例(推荐)

下面是使用jQuery实现图片轮播效果的攻略：

简介

图片轮播是网站常见的页面展示形式之一，实现方式很多，其中使用jQuery实现是比较简单的一种方式。通过jQuery，我们可以实现简单、高效且具有良好可维护性的图片轮播效果。

实现步骤

1.引入jQuery库文件

首先，在页面中引入jQuery库文件，可以使用jQuery的CDN链接，也可以下载到本地。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

2.创建图片轮播区域

在HTML页面中创建一个包含图片的div标签，作为图片轮播的展示区域。

<div id="carousel">
  <img src="image1.jpg" alt="image1">
  <img src="image2.jpg" alt="image2">
  <img src="image3.jpg" alt="image3">
</div>

3.设置CSS样式

为图片轮播区域设置CSS样式，使其具有合适的展示效果。

#carousel {
  width: 500px;
  height: 300px;
  overflow: hidden;
  position: relative;
}

#carousel img {
  width: 500px;
  height: 300px;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

#carousel img.active {
  opacity: 1;
}

4.编写jQuery代码

$(document).ready(function() {
  var interval = 3000; // 图片轮播间隔时间，单位毫秒
  var imgLength = $("#carousel img").length; // 图片数量
  var currentIndex = 0; // 当前图片索引

  setInterval(function() {
    $("#carousel img").removeClass("active");
    currentIndex = (currentIndex + 1) % imgLength;
    $("#carousel img:eq(" + currentIndex + ")").addClass("active");
  }, interval);
});

示例说明

下面分别介绍两个示例。

示例一：添加上一张、下一张按钮

在上面的步骤4的基础上，增加“上一张”、“下一张”两个按钮，用户可通过点击按钮实现图片切换。根据当前图片索引和按钮类型计算下一个图片索引，再通过赋予对应图片样式实现图片切换。

$(document).ready(function() {
  var interval = 3000; // 图片轮播间隔时间，单位毫秒
  var imgLength = $("#carousel img").length; // 图片数量
  var currentIndex = 0; // 当前图片索引

  setInterval(function() {
    $("#carousel img").removeClass("active");
    currentIndex = (currentIndex + 1) % imgLength;
    $("#carousel img:eq(" + currentIndex + ")").addClass("active");
  }, interval);

  $(".prev").click(function() {
    $("#carousel img").removeClass("active");
    currentIndex = (imgLength + currentIndex - 1) % imgLength;
    $("#carousel img:eq(" + currentIndex + ")").addClass("active");
  });

  $(".next").click(function() {
    $("#carousel img").removeClass("active");
    currentIndex = (currentIndex + 1) % imgLength;
    $("#carousel img:eq(" + currentIndex + ")").addClass("active");
  });
});

<div id="carousel">
  <img src="image1.jpg" alt="image1" class="active">
  <img src="image2.jpg" alt="image2">
  <img src="image3.jpg" alt="image3">
  <a href="#" class="prev">上一张</a>
  <a href="#" class="next">下一张</a>
</div>

示例二：添加轮播序号指示器

在上面的步骤4的基础上，增加轮播序号指示器，显示当前轮播到第几张图片。用户可通过点击指示器实现图片切换。根据用户点击的序号计算对应图片索引，再通过赋予对应图片样式实现图片切换。

$(document).ready(function() {
  var interval = 3000; // 图片轮播间隔时间，单位毫秒
  var imgLength = $("#carousel img").length; // 图片数量
  var currentIndex = 0; // 当前图片索引

  setInterval(function() {
    $("#carousel img").removeClass("active");
    currentIndex = (currentIndex + 1) % imgLength;
    $("#carousel img:eq(" + currentIndex + ")").addClass("active");
    $(".indicator li").removeClass("active");
    $(".indicator li:eq(" + currentIndex + ")").addClass("active");
  }, interval);

  $(".indicator li").click(function() {
    var index = $(this).index();
    $("#carousel img").removeClass("active");
    currentIndex = index;
    $("#carousel img:eq(" + currentIndex + ")").addClass("active");
    $(".indicator li").removeClass("active");
    $(".indicator li:eq(" + currentIndex + ")").addClass("active");
  });
});

<div id="carousel">
  <img src="image1.jpg" alt="image1" class="active">
  <img src="image2.jpg" alt="image2">
  <img src="image3.jpg" alt="image3">
  <ul class="indicator">
    <li class="active">1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</div>