js实现轮播图的完整代码

下面是JavaScript实现轮播图的完整攻略,包含两条示例说明:

一、代码实现步骤

  1. 选中需要轮播的元素和轮播的图片,通过DOM操作获取其元素节点。
    js
    let slider = document.querySelector(".slider");
    let img = document.querySelectorAll(".slider img");

  2. 设置轮播图片的宽度和高度。
    js
    let imgWidth = img[0].clientWidth;
    let imgHeight = img[0].clientHeight;

  3. 根据图片数量,设置轮播图外层容器的宽度。
    js
    slider.style.width = imgWidth * img.length + "px";

  4. 设置初始值和计时器。
    ```js
    let currentIndex = 0;
    let timer = null;

function sliderStart() {
timer = setInterval(() => {
// 判断当前是否轮播到最后一张
if (currentIndex === img.length - 1) {
currentIndex = 0;
slider.style.left = 0;
}
currentIndex++;
slider.style.left = -currentIndex * imgWidth + "px";
}, 2000);
}

sliderStart();
```

  1. 添加鼠标移入和移出事件控制轮播图的停止和继续。
    ```js
    slider.addEventListener("mouseover", () => {
    clearInterval(timer);
    });

slider.addEventListener("mouseout", () => {
sliderStart();
});
```

  1. 通过事件委托,为小圆点添加点击事件控制轮播图的切换。
    js
    let pagination = document.querySelector(".pagination");
    pagination.addEventListener("click", (event) => {
    // 判断点击的元素是否是小圆点
    if (event.target.tagName.toLowerCase() === "li") {
    // 获取小圆点的索引
    let index = [...pagination.children].indexOf(event.target);
    currentIndex = index;
    slider.style.left = -currentIndex * imgWidth + "px";
    }
    });

二、示例说明

示例1:无缝轮播

以下是一段完整的JavaScript代码,实现了无缝轮播功能。效果为:当轮播到最后一张图片时,再次轮播时,会回到第一张图片,实现无缝轮播。

let slider = document.querySelector(".slider");
let img = document.querySelectorAll(".slider img");

let imgWidth = img[0].clientWidth;
let imgHeight = img[0].clientHeight;

slider.style.width = imgWidth * img.length + "px";

let currentIndex = 0;
let timer = null;

function sliderStart() {
  timer = setInterval(() => {
    // 判断当前是否轮播到最后一张
    if (currentIndex === img.length - 1) {
      currentIndex = 0;
      slider.style.left = 0;
    }
    currentIndex++;
    slider.style.left = -currentIndex * imgWidth + "px";
  }, 2000);
}

sliderStart();

slider.addEventListener("mouseover", () => {
  clearInterval(timer);
});

slider.addEventListener("mouseout", () => {
  sliderStart();
});

示例2:带有分页器的轮播

以下是一段完整的JavaScript代码,实现了带有分页器的轮播功能。效果为:点击分页器上的小圆点,可以切换到对应的轮播位置。

let slider = document.querySelector(".slider");
let img = document.querySelectorAll(".slider img");

let imgWidth = img[0].clientWidth;
let imgHeight = img[0].clientHeight;

slider.style.width = imgWidth * img.length + "px";

let currentIndex = 0;
let timer = null;

function sliderStart() {
  timer = setInterval(() => {
    if (currentIndex === img.length - 1) {
      currentIndex = 0;
      slider.style.left = 0;
    }
    currentIndex++;
    slider.style.left = -currentIndex * imgWidth + "px";
  }, 2000);
}

sliderStart();

slider.addEventListener("mouseover", () => {
  clearInterval(timer);
});

slider.addEventListener("mouseout", () => {
  sliderStart();
});

let pagination = document.querySelector(".pagination");
pagination.addEventListener("click", (event) => {
  if (event.target.tagName.toLowerCase() === "li") {
    let index = [...pagination.children].indexOf(event.target);
    currentIndex = index;
    slider.style.left = -currentIndex * imgWidth + "px";
  }
});

以上就是JavaScript实现轮播图的完整代码攻略。

阅读剩余 71%

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:js实现轮播图的完整代码 - Python技术站

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

相关文章

  • 和我一起学 Three.js【初级篇】:1. 搭建 3D 场景

    ? 本篇文章共 5572 字,最近更新于 2023 年 04 月 19 日。 0. 系列文章合集 本系列第 6,7,8 章节支持在我的个人公众号「前端乱步」内付费观看,将在全平台文章「点赞数」+「评论数」 >= 500(第 6 章), 1000(第 7,8 章) 时分别解锁发布。 《和我一起学 Three.js【初级篇】:0. 总论》 ? 您当前在这里…

    JavaScript 2023年4月20日
    00
  • 纯JS实现的读取excel文件内容功能示例【支持所有浏览器】

    下面是详细讲解“纯JS实现的读取excel文件内容功能示例【支持所有浏览器】”的完整攻略。 1. 准备工作 在使用JS读取excel文件之前,需要先引入一些第三方库,下面是这些库的名称和链接: SheetJS – 一个纯JS实现的excel文件读写库,支持xlsx、csv、ods等多种格式。 FileSaver.js – 一个提供了文件保存功能的JS库,用于…

    JavaScript 2023年5月27日
    00
  • 轻松理解JavaScript之AJAX

    轻松理解JavaScript之AJAX AJAX是Asynchronous JavaScript and XML的简称,意思是异步的JavaScript和XML。 AJAX的本质 AJAX的本质是通过XMLHttpRequest对象异步发送HTTP请求,获取服务器返回的数据,然后使用JavaScript操作DOM来改变页面的内容,而不用重新刷新整个页面。 A…

    JavaScript 2023年5月18日
    00
  • javascript垃圾收集机制的原理分析

    JavaScript垃圾收集机制的原理分析 JavaScript是一门动态语言,它的变量和数据类型在运行时可以动态地创建和销毁。为了确保程序正常运行,JavaScript引擎需要定期回收无用的变量和对象。这个过程被称为垃圾收集。JavaScript实现垃圾收集的机制是自动的,垃圾收集器会自动识别哪些对象不再被程序使用,然后释放这些对象占用的内存。 垃圾收集器…

    JavaScript 2023年6月11日
    00
  • 使用HTML5的表单验证的简单示例

    当用户填写表单时,通常需要对其输入进行验证以确保数据的正确性和完整性。HTML5提供了一些内建的表单验证,可以帮助我们在浏览器端轻松实现表单验证。 下面是一个使用HTML5表单验证的简单示例: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&…

    JavaScript 2023年6月10日
    00
  • Javascript将图片的绝对路径转换为base64编码的方法

    将图片的绝对路径转换为base64编码的方法可以使用Javascript的Canvas对象来实现。具体过程如下: 步骤 1:创建一个Image对象 首先,我们需要创建一个Image对象,将想要转换成base64编码的图片作为其src属性的值。 const image = new Image(); image.src = ‘https://example.co…

    JavaScript 2023年5月19日
    00
  • jQuery Ajax 全局调用封装实例代码详解

    jQuery Ajax全局调用封装实例代码详解 在前端开发中,Ajax作为异步通信技术已经得到了广泛的应用。而通过jQuery库封装的Ajax则在开发中变得更加方便,让我们更加容易地处理数据请求和响应。本文将会详细介绍如何将jQuery的Ajax进行全局封装调用,以及如何实现Ajax的参数传递和数据处理。 前置知识 在进行本文讲解前,需要了解一些JavaSc…

    JavaScript 2023年6月11日
    00
  • 前端使用JSON.stringify实现深拷贝的巨坑详解

    首先,需要明确深拷贝和浅拷贝的概念。 在JavaScript中,对象的赋值有两种方式:深拷贝和浅拷贝。浅拷贝只是将对象的引用复制给了新的变量,而深拷贝则是递归地复制对象及所有嵌套的子对象。 JSON.stringify可以将一个JavaScript对象序列化成一个JSON字符串,而JSON.parse则可以将一个JSON字符串反序列化成一个JavaScrip…

    JavaScript 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部