JS轮播图的实现方法

实现 JavaScript 轮播图的方法有很多,下面将介绍其中一种常见的轮播图实现方法。

利用 HTML、CSS、JavaScript 实现轮播图

HTML 结构

轮播图的 HTML 结构需要两个主要的部分:

  1. 包含轮播图片的容器,比如 div,在这个容器内部有多个用于展示图片的 img 元素,这些 img 元素可以通过 CSS 的方式来控制排列。
  2. 突出显示当前图片的指示器,比如小圆点。

下面是一个简单的轮播图的 HTML 代码结构:

<div class="slider">
  <img src="image-1.jpg" alt="image-1">
  <img src="image-2.jpg" alt="image-2">
  <img src="image-3.jpg" alt="image-3">
  <img src="image-4.jpg" alt="image-4">
  <div class="slider-indicators">
    <span class="active"></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>

CSS 样式

轮播图的 CSS 样式主要是控制图片的布局和动画效果,还有指示器的样式设置。下面是一个简单的实现轮播图样式的 CSS 代码:

.slider {
  position: relative;
  width: 100%;
  height: 500px;
}

.slider img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s;
}

.slider img.active {
  opacity: 1;
}

.slider-indicators {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}

.slider-indicators span {
  width: 10px;
  height: 10px;
  background-color: #fff;
  border-radius: 50%;
  margin-right: 10px;
  cursor: pointer;
}

.slider-indicators span.active {
  background-color: #000;
}

JavaScript 逻辑

利用 JavaScript 实现轮播图需要掌握以下技能:

  1. 计算轮播图的宽度或高度,用于图片的滑动和展示。
  2. 图片滑动的动画效果。
  3. 指示器的控制和切换。

下面是一个简单的 JavaScript 代码实现:

const slider = document.querySelector('.slider');
const imgs = slider.querySelectorAll('img');
const indicators = slider.querySelectorAll('.slider-indicators span');
let index = 0;

function showImg() {
  imgs.forEach((img) => {
    img.classList.remove('active');
  });
  imgs[index].classList.add('active');
}

function showIndicator() {
  indicators.forEach((indicator) => {
    indicator.classList.remove('active');
  });
  indicators[index].classList.add('active');
}

function next() {
  index++;
  if (index === imgs.length) {
    index = 0;
  }
  showImg();
  showIndicator();
}

let intervalId = setInterval(next, 3000);

slider.addEventListener('mouseover', () => {
  clearInterval(intervalId);
});

slider.addEventListener('mouseout', () => {
  intervalId = setInterval(next, 3000);
});

indicators.forEach((indicator, i) => {
  indicator.addEventListener('click', () => {
    index = i;
    showImg();
    showIndicator();
  });
});

这段代码实现了轮播图的以下功能:

  1. 鼠标放在轮播图上时,轮播图停止自动切换。
  2. 鼠标移开轮播图后,轮播图重新开始自动切换。
  3. 点击指示器时,切换到相应的图片。

示例说明

这是一个基础的轮播图实现方法,以下两个示例将具体说明如何利用 HTML、CSS、JavaScript 实现轮播图。

示例一

假设有 3 张轮播图片,可以先用 HTML 代码创建轮播图的结构:

<div class="slider">
  <img src="./img1.jpg" alt="img1">
  <img src="./img2.jpg" alt="img2">
  <img src="./img3.jpg" alt="img3">
  <div class="slider-indicators">
    <span class="active"></span>
    <span></span>
    <span></span>
  </div>
</div>

其中,.active 类表示当前显示的图片。

接下来,可以用 CSS 样式设置轮播图的样式:

.slider {
  position: relative;
  width: 600px;
  height: 400px;
  margin: 30px auto;
  overflow: hidden;
}

.slider img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 1s;
}

.slider img.active {
  opacity: 1;
}

.slider-indicators {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}

.slider-indicators span {
  width: 10px;
  height: 10px;
  background-color: #fff;
  border-radius: 50%;
  margin-right: 10px;
  cursor: pointer;
}

.slider-indicators span.active {
  background-color: #000;
}

这段 CSS 样式能够设置图片的布局、样式,以及指示器的样式。

最后,可以用 JavaScript 代码实现轮播图的自动切换和手动切换:

const slider = document.querySelector('.slider');
const imgs = slider.querySelectorAll('img');
const indicators = slider.querySelectorAll('.slider-indicators span');
let index = 0;

function showImg() {
  imgs.forEach((img) => {
    img.classList.remove('active');
  });
  imgs[index].classList.add('active');
}

function showIndicator() {
  indicators.forEach((indicator) => {
    indicator.classList.remove('active');
  });
  indicators[index].classList.add('active');
}

function next() {
  index++;
  if (index === imgs.length) {
    index = 0;
  }
  showImg();
  showIndicator();
}

let intervalId = setInterval(next, 3000);

slider.addEventListener('mouseover', () => {
  clearInterval(intervalId);
});

slider.addEventListener('mouseout', () => {
  intervalId = setInterval(next, 3000);
});

indicators.forEach((indicator, i) => {
  indicator.addEventListener('click', () => {
    index = i;
    showImg();
    showIndicator();
  });
});

以上代码实现了轮播图的自动切换和手动切换功能。

示例二

有的时候,需要创建垂直方向的轮播图,可以对 CSS 样式进行一些修改,使之垂直展示。HTML 结构代码不变。

CSS 样式修改如下所示:

.slider {
  position: relative;
  width: 600px;
  height: 400px;
  margin: 30px auto;
  overflow: hidden;
}

.slider img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 1s;
}

.slider img.active {
  opacity: 1;
}

.slider-indicators {
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
}

.slider-indicators span {
  width: 10px;
  height: 10px;
  background-color: #fff;
  border-radius: 50%;
  margin-bottom: 10px;
  cursor: pointer;
}

.slider-indicators span.active {
  background-color: #000;
}

这样做会使轮播图和指示器展示在垂直方向,而非水平方向。

接下来,可以用 JavaScript 代码实现轮播图的自动切换和手动切换,代码不变。

总结

以上介绍了一个使用 HTML、CSS、JavaScript 实现轮播图的方法,其中主要包括了 HTML 结构、CSS 样式和 JavaScript 逻辑的分析和代码实现,还给出了两个实例展示了如何计算轮播图的宽度或高度、图片滑动的动画效果、以及指示器的控制和切换。

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

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

相关文章

  • Dreamweaver中div标签怎么设置左右并排?

    在 Dreamweaver 中,我们可以使用 CSS 来设置 div 标签左右并排。下面是一个完整攻略,包含了如何使用 CSS 来设置 div 标签左右并排的过程和两个示例说明。 Dreamweaver 中 div 标签左右并排的设置 1. 使用 float 属性 我们可以使用 float 属性来设置 div 标签左右并排。下面是一个示例: <div …

    css 2023年5月18日
    00
  • vue前端性能优化之预加载和懒加载示例详解

    Vue前端性能优化之预加载和懒加载示例详解 前言 随着互联网信息的爆炸式增长,用户使用大量的移动设备上网冲浪,对网站的访问速度提出了更高的要求。为了提高网站的性能,我们可以使用预加载和懒加载这两种技术。 预加载 预加载是指在页面加载完成以及用户行为之前,提前加载所需的资源,从而提高页面的响应速度和用户体验。常用的预加载测试方法有以下两种: link标签方式实…

    css 2023年6月10日
    00
  • input 按钮在IE下显现不一致的兼容问题

    为确保网站在各种浏览器下都显示正常,我们需要考虑兼容性问题。在IE浏览器下,input按钮的样式会有一些差异。下面是处理此类兼容性问题的攻略: 样式重置 我们可以将样式重置为一致的基础样式,从而解决在IE下的显示不一致的问题。 重置input按钮的CSS样式可以使用以下代码: input[type="button"],input[type…

    css 2023年6月10日
    00
  • 微信小程序vant弹窗组件的实现方式

    关于微信小程序vant弹窗组件的实现方式,我给出以下完整攻略: 简介 vant是一款基于Vue.js的移动端组件库,在微信小程序中也可以使用,其中,vant提供了一些常用的弹窗组件供我们使用。 实现方式 在使用vant中的弹窗组件时,需先引入vant组件库: import "@vant/weapp/dist/toast/toast"; i…

    css 2023年6月10日
    00
  • 用CSS实现表单form布局

    下面是详细讲解“用CSS实现表单form布局”的完整攻略: 1. 分析布局结构 在实现表单的CSS布局之前,我们首先需要分析表单的布局结构。一般来说,表单的布局由以下几个部分组成: 表单元素的标签 表单元素的输入框或选项 表单元素的提示信息 在这些部分中,标签和输入框通常是一一对应的,而提示信息则需要根据表单元素的状态来变化。 2. 布局方法 有多种方法可以…

    css 2023年6月11日
    00
  • JS、CSS以及img对DOMContentLoaded事件的影响

    DOMContentLoaded是DOM树构建完成之后触发的事件,在页面所有DOM元素都被解析构建完成后才会触发。在此事件触发后,页面上的所有静态资源都已加载完成,可以执行一些需要依赖DOM元素的逻辑。 JS对DOMContentLoaded事件的影响 Javascript是一种可以操作DOM元素的脚本语言,很多页面操作的逻辑都是在DOM树构建完成后通过JS…

    css 2023年6月10日
    00
  • 你知道怎么在 HTML 页面中使用 React吗

    当我们想要在一个 HTML 页面中使用 React 时,我们有如下步骤: 步骤一:引入 React 库 首先我们需要在 HTML 页面中引用 React 库。我们可以使用 CDN 或者通过 npm/yarn 安装。 如果使用 CDN,可在 HTML 页面的 <head> 中添加如下代码: <!– React –> <scri…

    css 2023年6月9日
    00
  • CSS滚动条设置方法(横向滚动条、纵向滚动条)

    CSS滚动条是指在网页中的内容过大以至于无法展示在一个视窗中,需要通过滚动条来实现内容的滚动。滚动条在美化上可以让内容更加美观,并增强用户体验。本篇攻略将详细讲解CSS滚动条的美化方法。 首先,我们需要知道CSS滚动条的基本样式属性: scrollbar-width (滚动条的宽度) scrollbar-track-color (滚动条的轨道颜色) scro…

    Web开发基础 2023年3月20日
    00
合作推广
合作推广
分享本页
返回顶部