jquery实现简单的banner轮播效果【实例】

下面是详细讲解jquery实现简单的banner轮播效果的攻略。

1. 编写基础html文件

首先，在html文件中引入必要的css和js文件，编写基础的html文件结构如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Banner轮播效果</title>
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div class="banner">
    <ul class="img-box">
      <li><img src="images/1.jpg" alt=""></li>
      <li><img src="images/2.jpg" alt=""></li>
      <li><img src="images/3.jpg" alt=""></li>
      <li><img src="images/4.jpg" alt=""></li>
      <li><img src="images/5.jpg" alt=""></li>
    </ul>
    <ul class="dot-box">
      <li class="active"></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <a href="javascript:void(0);" class="prev-btn"></a>
    <a href="javascript:void(0);" class="next-btn"></a>
  </div>
  <script src="js/jquery-3.6.0.min.js"></script>
  <script src="js/script.js"></script>
</body>
</html>

其中，我们创建了一个名为banner的div，它包含了两个ul列表（一个是图片列表，另一个是点列表）。同时，1.jpg ~ 5.jpg 是轮播图的图片资源，我们使用a标签来作为上一页和下一页的按钮。这是一个基础的html文件结构。

2. css样式

接下来，我们来编写样式。我们先默认隐藏图片列表中除了第一张图片以外的所有图片，同时隐藏上一页和下一页按钮。

.banner .img-box li:not(:first-child) {
  display: none;
}

.banner a { 
  display: none;
}

3. 实现轮播效果

我们可以利用css3的切换效果和jquery中的定时器来实现轮播效果。首先，我们需要创建一个定时器，通过更改active类的位置来切换图片。

var index = 0; // 当前显示的图片索引

function showImg() {
  $(".img-box li").eq(index).fadeIn().siblings().fadeOut();
  $(".dot-box li").eq(index).addClass("active").siblings().removeClass("active");
}
var timer = setInterval(function() {
  index++;
  if (index > 4) {
    index = 0;
  }
  showImg();
}, 2000);

在上面的代码中，我们首先定义了一个showImg函数，用于切换图片和点的选中状态。然后，我们创建了一个名为timer的变量，并使用setInterval函数来启动定时器。在定时器的回调函数中，我们先将index加1，然后判断是否超过图片总数，如果超过则将index设为0，同时调用showImg函数来切换图片和点的选中状态。最后，我们在文档加载完成后启动定时器：

$(document).ready(function() {
  showImg();
});

接下来，我们为上一页和下一页按钮添加点击事件。当点击上一页按钮时，我们需要将index减1，并判断是否到头，如果到头则将index设为图片总数-1，然后调用showImg函数。当点击下一页按钮时，我们需要将index加1，并判断是否超过图片总数，如果超过则将index设为0，然后调用showImg函数。

$(".prev-btn").click(function() {
  index--;
  if (index < 0) {
    index = 4;
  }
  showImg();
});

$(".next-btn").click(function() {
  index++;
  if (index > 4) {
    index = 0;
  }
  showImg();
});

5. 实现点列表功能

最后，我们需要为点列表添加点击事件。当点击某一个点时，我们需要将index设为当前点的索引，然后调用showImg函数。

$(".dot-box li").click(function() {
  index = $(this).index();
  showImg();
});

到这里，我们就完成了一个简单的banner轮播效果。完整的代码示例可以参考下面的链接。

示例一：https://codesandbox.io/s/jquery-banner-1-9s592

示例二：https://codesandbox.io/s/jquery-banner-2-m3j0u

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jquery实现简单的banner轮播效果【实例】 - Python技术站

jquery实现简单的banner轮播效果【实例】

1. 编写基础html文件

2. css样式

3. 实现轮播效果

4. 添加上一页和下一页按钮

5. 实现点列表功能

相关文章