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日

相关文章

  • document.cookie 使用小结

    我们来详细讲解一下 document.cookie 的使用小结。 一、概述 document.cookie 属性是用于读取和设置 Cookie 的,它可以让我们在客户端存储非常小且不敏感的数据。document.cookie 属性返回所有 cookie 名称及其对应值。但请记住,document.cookie 属性不是一个数组,而是一个字符串,而且无法支持删…

    JavaScript 2023年6月11日
    00
  • 静态页面的值传递(三部曲)

    静态页面的值传递,是指在没有使用后端语言的情况下,通过前端技术在多个页面之间传递数据,实现多页面数据共享的目的。其实现的主要步骤可以归纳为以下三步: 使用URL传递参数 在页面A中使用URL传递参数,在链接中添加参数,并在页面B中通过解析URL获取传递的参数值,从而实现两个页面间的数据传递。 示例1: 在页面A中有一个按钮,点击后跳转至页面B,并将参数id值…

    JavaScript 2023年6月11日
    00
  • vue实现element-ui对话框可拖拽功能

    实现Element UI对话框可拖拽功能的方法有许多,其中一种方法是通过使用Vue的指令和原生js的拖拽事件来实现。下面我会详细讲解一下这个过程。 步骤一:添加v-dialogDrag指令 首先,在Vue中,我们可以通过自定义指令来实现特定的功能。因此我们需要创建一个名为v-dialogDrag的自定义指令来实现Element UI对话框的拖拽功能。 Vue…

    JavaScript 2023年6月11日
    00
  • ASP.NET没有魔法_ASP.NET MVC 模型验证方法

    ASP.NET没有魔法_ASP.NET MVC 模型验证方法 什么是ASP.NET MVC模型验证? ASP.NET MVC模型验证是指在客户端输入数据后提交到服务器时,对数据进行校验的过程。在ASP.NET MVC中,模型验证是至关重要的,因为它可以确保数据的完整性和有效性,避免了潜在的错误。 ASP.NET MVC模型验证的实现方式 ASP.NET MV…

    JavaScript 2023年6月11日
    00
  • JavaScript实现请求服务端接口方法详解

    JavaScript实现请求服务端接口方法详解 一、概述 在Web开发中,经常需要从服务端获取数据或提交数据到服务端。这时,我们可以通过AJAX技术来完成数据的异步交互。使用JavaScript实现异步请求服务端接口,可以大大提升用户体验和页面的交互性。在本文中,我们将详细介绍使用JavaScript实现请求服务端接口的方法,以及两个示例说明。 二、使用XM…

    JavaScript 2023年6月11日
    00
  • Ajax核心技术代码分享

    下面是关于“Ajax核心技术代码分享”的完整攻略,分为以下几个部分: 一、什么是Ajax? Ajax全称为Asynchronous JavaScript and XML,意为异步JavaScript和XML。它是一种用于创建快速动态网页的技术,通过在不刷新整个页面的情况下与服务器进行数据交换,实现局部页面的刷新和更新。它主要由HTML、CSS、JavaScr…

    JavaScript 2023年6月11日
    00
  • 解读JSON的三种格式

    解读JSON的三种格式攻略: 1. 紧凑格式 特点 紧凑格式是最简单也是最常用的JSON格式表示方式,数据以一行或多行或者整个文件的方式存在,但所有的换行符、制表符、空格、行处理符都会被忽略掉。由于所有的空格被忽略了,所以预备阶段和解释JSON格式所需要处理的字符会比较少。 示例: {"id":1000,"name":…

    JavaScript 2023年5月27日
    00
  • asp.net 操作cookie的简单实例

    下面我将详细讲解“ASP.NET 操作 Cookie 的简单实例”完整攻略。 1. 什么是 Cookie? Cookie 是一种被网站服务器发送给用户浏览器的短文本字符串,通常用于记录用户的一些信息,如用户名、购物车信息等等。它被浏览器保存并用于后续的请求中,让网站能够更好地向用户提供服务。 2. ASP.NET 如何操作 Cookie? ASP.NET 中…

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