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();
});

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

接下来,我们为上一页和下一页按钮添加点击事件。当点击上一页按钮时,我们需要将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

阅读剩余 61%

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

(0)
上一篇 2023年6月11日
下一篇 2023年6月11日

相关文章

  • 全面介绍vue 全家桶和项目实例

    全面介绍Vue全家桶与项目实例 什么是Vue全家桶 Vue全家桶指的是一系列由Vue官方提供的插件和工具,为Vue项目提供完整的开发解决方案。其中包括: Vue.js:一个轻量级的前端MVVM框架 Vue Router:用于Vue.js项目的路由管理插件 Vuex:Vue.js应用程序的状态管理库 Vue CLI:Vue.js应用程序的标准工具链 Vue T…

    css 2023年6月9日
    00
  • 浅谈网页基本性能优化规则小结

    下面详细讲解“浅谈网页基本性能优化规则小结”的完整攻略。 一、优化目标 在进行网页性能优化时,我们需要达到以下优化目标: 减少页面的加载时间。 减少HTTP请求的个数。 减少页面的大小。 提高页面响应速度。 二、基本优化规则 1. HTML优化 代码精简,删除不必要的空格、注释和格式化代码,减小文件大小。 将JS代码放到页面底部,将CSS放到页面头部。 使用…

    css 2023年6月10日
    00
  • DW在html中插入css样式方法

    以下是“DW在HTML中插入CSS样式方法”的完整攻略: DW在HTML中插入CSS样式方法 在 Dreamweaver 中,可以使用多种方法在 HTML 中插入 CSS 样式。以下是一些常见的实现方法。 方法一:使用内部样式表 使用内部样式表是一种常见的在 HTML 中插入 CSS 样式的方法。以下是一个示例: <!DOCTYPE html> …

    css 2023年5月18日
    00
  • 解读Vue-loader的相关知识

    解读Vue-loader的相关知识 Vue-loader是什么 Vue-loader是一个webpack加载器,用于解析Vue单文件组件(SFC)并将其转换为JavaScript模块。 如何使用Vue-loader 使用Vue-loader需要同时安装Vue和Vue-loader两个npm包,并在webpack的配置文件中进行配置。 具体步骤如下: 安装Vu…

    css 2023年6月9日
    00
  • 浏览器CSS Reset的十种方法

    浏览器CSS Reset的十种方法 CSS Reset是指通过重置浏览器默认样式来解决跨浏览器兼容问题的方法。这个问题经常会让前端开发者感到困扰,因为不同的浏览器有不同的默认样式。本文将讲解浏览器CSS Reset的十种方法。 方法一:传统的CSS Reset 传统的CSS Reset是通过给所有元素设置margin和padding为0,从而消除默认样式的差…

    css 2023年6月9日
    00
  • CSS样式表教程:浏览器默认样式

    CSS样式表教程:浏览器默认样式 1. 什么是浏览器默认样式 浏览器默认样式是指浏览器在没有CSS样式表的情况下为HTML元素应用的样式。不同的浏览器会有不同的默认样式,因此在网页开发中,了解浏览器默认样式非常重要。 2. 浏览器默认样式的问题 浏览器的默认样式通常都会存在一些问题,如过大的行高、字体太小或太大、不同浏览器之间的表现不一致等等。因此,为了解决…

    css 2023年6月9日
    00
  • 详解css中inline-block的最小宽度值

    下面是针对“详解CSS中inline-block的最小宽度值”的完整攻略: 标题 inline-block 的基本特点 inline-block 是 CSS 属性中的一种,它可以让元素像 inline 元素一样排列在文本流中,但是同时又可以具有 block 元素的(box)特点。 在使用 inline-block 的元素中,元素之间有一个非零间距(通常为 4…

    css 2023年6月10日
    00
  • CSS中的clip-path区域裁剪属性使用教程

    下面就是关于CSS中的clip-path区域裁剪属性的完整攻略: 什么是clip-path区域裁剪属性 clip-path是CSS中一种用于剪切元素区域的属性。这个属性允许你在网页上创建具有各种形状的元素,并使它们融入到整个设计中去。 clip-path属性非常强大,它可以用来创造各种形状,例如圆形、三角形、多边形等。它可以被用于剪切图片,文字或任何其他元素…

    css 2023年6月11日
    00
合作推广
合作推广
分享本页
返回顶部