js实现无缝轮播图

下面是“JS实现无缝轮播图”的完整攻略:

目录

  1. 需求分析
  2. HTML结构构建
  3. CSS样式定义
  4. JS实现无缝轮播图

1. 需求分析

在实现无缝轮播图前,我们需要先分析需求,包括:

  • 实现自动轮播效果
  • 点击箭头进行轮播切换
  • 延迟轮播时间,停留在当前轮播图上
  • 实现首尾轮播切换时无缝连接

2. HTML结构构建

在分析需求后,我们需要搭建html结构,基本代码如下:

<div class="carousel">
    <ul class="img-box">
        <li><img src="1.jpg" alt=""></li>
        <li><img src="2.jpg" alt=""></li>
        <li><img src="3.jpg" alt=""></li>
        <li><img src="4.jpg" alt=""></li>
        <li><img src="5.jpg" alt=""></li>
        <li><img src="6.jpg" alt=""></li>
    </ul>
    <ul class="btn-box">
        <li class="btn active"></li>
        <li class="btn"></li>
        <li class="btn"></li>
        <li class="btn"></li>
        <li class="btn"></li>
        <li class="btn"></li>
    </ul>
    <div class="arrow-box">
        <div class="left-arrow"><</div>
        <div class="right-arrow">></div>
    </div>
</div>

其中img-box用来呈现轮播图,btn-box用来显示当前轮播图位置,arrow-box用来存放箭头。

3. CSS样式定义

在html构建完成后,定义CSS样式使得页面结构排版合理,样式代码如下:

.carousel {
    position: relative;
    overflow: hidden;
    width: 600px;
    height: 400px;
    margin: 0 auto;
}
.img-box {
    position: relative;
    list-style: none;
    width: 600%;
    height: 400px;
    margin: 0;
    padding: 0;
    left: 0;
    transition: left 0.5s ease-in-out;
}
.img-box li {
    position: relative;
    float: left;
    width: 16.66667%;
    height: 400px;
}
.img-box li img {
    width: 100%;
    height: 100%;
}
.btn-box {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
}
.btn {
    position: relative;
    display: inline-block;
    width: 8px;
    height: 8px;
    margin: 0 5px;
    background: #ccc;
    border-radius: 50%;
    cursor: pointer;
}
.btn.active {
    background: #f40;
}
.arrow-box {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 35px;
    height: 60px;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}
.arrow-box:hover {
    opacity: 1;
}
.left-arrow,
.right-arrow {
    position: absolute;
    top: 50%;
    margin-top: -15px;
    width: 16px;
    height: 30px;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    line-height: 30px;
    background: #000;
    cursor: pointer;
    z-index: 99;
}
.left-arrow {
    left: 0;
}
.right-arrow {
    right: 0;
}

4. JS实现无缝轮播图

在html和css都已经完成后,使用JS实现“无缝轮播”的功能。首先我们需要获取所有需要操作的元素。

let carousel = document.querySelector('.carousel');
let imgBox = document.querySelector('.img-box');
let imgList = document.querySelectorAll('.img-box li');
let btnList = document.querySelectorAll('.btn-box .btn');
let arrowBox = document.querySelector('.arrow-box');
let leftArrow = document.querySelector('.left-arrow');
let rightArrow = document.querySelector('.right-arrow');

获取到元素后,需要给每个位置按钮icon绑定点击事件,触发点击事件后会跳转到对应的位置。

for (let i = 0; i < btnList.length; i++) {
   btnList[i].onclick = function () {
      // 切换轮播图片位置
      imgBox.style.left = -i * imgList[0].offsetWidth + 'px';
      // 切换当前位置按钮的active类名
      for (let j = 0; j < btnList.length; j++) {
         btnList[j].classList.remove('active');
      }
      btnList[i].classList.add('active');
      // 获取当前显示的图片位置
      curIndex = i;
   }
}

接着,通过定时器自动轮播,切换图片位置。同时,在首尾轮播切换时,通过JS动态添加和删除节点,实现无缝连接效果。

// 设置定时器自动轮播
let timer = setInterval(() => {
   // 判断当前是否为最后一张图片,如果是则返回第一张图片
   if (curIndex === imgList.length - 1) {
      imgBox.appendChild(imgList[0].cloneNode(true));
      // 过渡效果结束后,删除clone的图片节点,保证轮播的正常性
      imgBox.addEventListener('transitionend', function () {
         imgBox.removeChild(imgList[imgList.length - 1]);
         // 过渡完毕后索引设为0
         curIndex = 0;
      }, false);
   } else {
      curIndex++;
   }
   // 根据当前位置的变化,切换轮播图
   imgBox.style.left = -curIndex * imgList[0].offsetWidth + 'px';
   // 切换当前位置按钮的active类名
   for (let j = 0; j < btnList.length; j++) {
      btnList[j].classList.remove('active');
   }
   btnList[curIndex].classList.add('active');
}, 2000);

完成以上JS代码,我们就实现了“JS实现无缝轮播图”的完整攻略。

示例演示

以下提供两个JS实现无缝轮播图的完整示例,可供参考。

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

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

相关文章

  • JavaScript函数的4种调用方法详解

    JavaScript函数的4种调用方法详解 JavaScript中函数的调用方式有4种,分别是函数调用、方法调用、构造函数调用和apply/call调用。在本篇文章中,我们将针对这4种调用方式进行详细讲解。 函数调用 函数调用是JavaScript中最基础的调用方式。当一个函数作为函数调用时,函数中的this指向全局对象(即window对象)。 以下是函数调…

    JavaScript 2023年5月17日
    00
  • JavaScript 数组- Array的方法总结(推荐)

    JavaScript 数组- Array的方法总结(推荐) JavaScript的Array是一种非常常用的数据类型,它提供了非常多实用的方法来对数组进行操作和处理。本篇文章将会对JavaScript Array中最重要的一些方法进行详细的介绍。 创建一个数组 在JavaScript中,我们可以通过两种方式来创建一个数组,分别是通过Array构造器以及通过数…

    JavaScript 2023年5月27日
    00
  • jQuery 创建Dom元素

    jQuery 是一款流行的 JavaScript 库,可以方便地操作 DOM 元素。在 jQuery 中,创建 DOM 元素有以下几种方式: 1. 使用 HTML 代码创建 可以使用 jQuery 的 $() 方法创建 DOM 元素,该方法可以接收包含 HTML 代码的字符串作为参数。例如: var div = $("<div>Hell…

    JavaScript 2023年6月10日
    00
  • ReactNative错误采集原理在Android中实现详解

    《ReactNative错误采集原理在Android中实现详解》 背景 ReactNative在开发过程中,由于组件之间的联系十分密切,错误的发生也十分频繁,因此很有必要对错误进行采集。本文主要讲解ReactNative错误采集原理在Android中的实现。 实现过程 异常注入 在ReactNative的代码中,会使用到一些Android原生的代码,如组件封…

    JavaScript 2023年6月11日
    00
  • js replace() 文本替换你所不知的

    接下来我将详细讲解一下 JavaScript 中的 replace() 方法,包括它的用法、语法、返回值、示例等内容。 replace() 方法的用途 在 JavaScript 中,replace() 方法是用来在一个字符串中查找指定值或正则表达式,并将匹配的部分替换为另一个指定的值或字符串。 replace() 方法的语法 replace() 方法的基本语…

    JavaScript 2023年5月28日
    00
  • layui表格 返回的数据状态异常的解决方法

    以下是 “layui表格 返回的数据状态异常的解决方法” 的完整攻略。 问题描述 在进行 layui 数据表格的开发时,当接收后端返回的数据时异常,可能会出现以下问题: 列表页面显示空白; 主键无法显示或者是 NaN。 解决办法 当我们使用 layui 数据表格时,通常会涉及到后端返回 JSON 格式的数据。layui 表格在接收后端返回的数据时,必须满足以…

    JavaScript 2023年5月28日
    00
  • js验证模型自我实现的具体方法

    下面是关于”js验证模型自我实现的具体方法”的完整攻略及示例: 1. 确定验证规则及需求 在实现js验证模型之前,需要明确业务场景下需要验证哪些数据和如何验证,需要明确以下几点: 验证的字段名称 验证规则(如是否为空、长度要求、数据类型、特殊字符等要求) 验证提示语(该字段验证未通过时应该显示什么提示) 比如,在一个注册页面中,需要验证用户名、密码和确认密码…

    JavaScript 2023年6月10日
    00
  • 20个必会的JavaScript面试题(小结)

    下面是“20个必会的JavaScript面试题(小结)”的完整攻略: 1. 介绍JavaScript的数据类型 JavaScript有六种基本数据类型,分别是:数字(Number)、字符串(String)、布尔(Boolean)、null、undefined和对象(Object)。其中,对象又可以分为普通对象、函数、数组等多种类型。 2. 什么是闭包?如何使…

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