JS原生实现轮播图的几种方法


Posted in Javascript onMarch 23, 2021

轮播图

主要思想就是:

在大的容器里,装着一个很长的表,表是容器宽度的整数倍。

然后通过更改列表样式里的left属性来实现左右滑动。

本文旨在控制滑动五张图片,但在html中使用了七张图片,第一张和最后一张是有重复的,至于原因会在下面解释。

JS原生实现轮播图的几种方法

通过给容器设定overflow:hidden属性来保证只显示容器视口大小的一张图片。

<body>
 <div id="container">  /*容器*/
  <div id="wrap" style="left: -400px;">  /*存放图片的列表*/
   <div class="item item5">l5</div>
   <div class="item item1">1</div>
   <div class="item item2">2</div>
   <div class="item item3">3</div>
   <div class="item item4">4</div>
   <div class="item item5">5</div>
   <div class="item item1">r1</div>
  </div>
 </div>
 <div id="key">   /*设置按钮*/   
  <div id="list">         /*点击小圆圈切换到固定图片*/
   <div class="btn1 btnNum">1</div>
   <div class="btn2 btnNum">2</div>
   <div class="btn3 btnNum">3</div>
   <div class="btn4 btnNum">4</div>
   <div class="btn5 btnNum">5</div>
  </div>
  <div id="btn">     /*向左切换和向右切换的按钮*/
   <button class="left">←</button>
   <button class="right">→</button>
  </div>
 </div>
</body>

CSS:

可以给wrap列表设置flex属性,让图片在一行显示。其他布局可以按自己需求来做。

注意在定义id="wrap"d的节点中设置了内联样式left。因为在切换图片的时候我用到的是left属性,而如果不设置left的话,在DOM设置style时是找不到left属性的。

<style>
  #container {
   width: 400px;
   height: 300px;
   border: 8px rgb(8, 8, 8) solid;
   margin: 0 auto;
   margin-top: 150px;
   overflow: hidden;
   position: relative;
  }
  #wrap {
   width: 2800px;
   height: 300px;
   display: flex;
   position: relative;
  }
  .item {
   flex: 1;
   width: 400px;
   height: 300px;
  }
  .item1 {
   background-color: rosybrown;
  }
  .item2 {
   background-color: rgb(12, 226, 37);
  }
  .item3 {
   background-color: rgb(212, 221, 29);
  }
  .item4 {
   background-color: rgb(61, 27, 182);
  }
  .item5 {
   background-color: rgb(221, 23, 145);
  }
  #key {
   width: 400px;
   height: 300px;
   margin: 0 auto;
  }
  #list {
   width: 400px;
   height: 40px;
   display: flex;
   justify-content: center;
  }
  #list div {
   margin-top: 10px;
   margin-left: 10px;
   width: 20px;
   height: 20px;
   background-color: rgb(13, 162, 221);
   text-align: center;
   border-radius: 45%;
   opacity: 0.6;
  }
  #list div:hover {
   cursor: pointer;
   opacity: 1;
  }
  #btn {
   width: 400px;
   text-align: center;
  }
 </style>

这是完整的样式

JS原生实现轮播图的几种方法

每种颜色代表一张图片,且按序标了序号。起始位置是第二张图片。

至于为什么第一张和最后一张有额外重复的一张放在两端,是为了在做滑动效果的时候,最后一张(倒数第二张,粉紫色)可以继续向右顺滑的滑到第一张(其实是本图的第二张,浅棕色的)。第一张(本图第二张,浅棕色)向左滑动时可以顺滑的滑到最后一张(实则倒数第二张)。继续往下看。

1. 多种轮播方式

轮播必然离开不了定位,以及修改wrap列表的left属性,使其移动。

先初始化几个数据

var wrap = document.getElementById('wrap');
var nowleft = -400;     //用于存放当前列表的left的值
var currIndex = 1;          //用于存放当前是第几个图片
//定位到几个按钮
var btnNum = document.getElementsByClassName('btnNum'); //小圆圈
 
var right = document.getElementsByClassName('right')[0]; //向右滑的按钮
var left = document.getElementsByClassName('left')[0];      //向左滑的按钮

1.1 定时自动轮播效果

只讲向左自动滑动的效果

既然是自动轮播的,那必然少不了setInterval()定时器让其持续轮播。

function next() {
  setInterval(function() {      //设置每两秒切换一次图片
    wrap.style.transition = 'left 1s' //设定有过渡滑动的效果
        nowleft = parseInt(wrap.style.left) - 400;  //切换一次后nowleft应该减少(即向左滑)一个图片的宽度
    wrap.style.left = nowleft + 'px';   //然后将nowleft赋值给wrap的left属性
    if(parseInt(wrap.style.left) == -2400) { //判断到最后一个后,偷偷变回到最开头的位置
      setTimeout(() => {
       wrap.style.transition = 'none'  //因为是偷偷变回去,所以要取消过渡效果
       nowleft = -400;
       wrap.style.left = nowleft + 'px'
      },1200) //保证定时器的时间大于过度的时间且小于每次轮换的时间
     }
  },2000)
}

由于wrap.style.left 返回的是带px的字符串,所以用parseInt可以取得前面的数值/

1.2 按向右滑动按钮

right.addEventListener('click',function() {
  if(nowleft >= -2000){   //判断是否到最后一个图了,没有的话就开始滑动
   nowleft -= 400;
   wrap.style.transition = 'left 1s';
   wrap.style.left = nowleft + 'px';
  }
  if(nowleft == -2400) {   //如果到最后一个图了,就偷偷换回第一张图
   setTimeout(() => {
    wrap.style.transition = 'none';
    nowleft = -400;
    wrap.style.left = nowleft + 'px';
   },1020)
  }
})

1.3 小圆圈切换图片

for(let i = 0; i < btnNum.length; i++) {
  btnNum[0].style.opacity = 1;
  btnNum[i].addEventListener('click',function() {
   wrap.style.transition = 'left 1s';
   for(let j = 0; j < btnNum.length; j++) {
    btnNum[j].style.opacity = '0.6';
   }
   btnNum[i].style.opacity = 1;
   nowleft = nowleft - (i+1 - currIndex)*400;
   currIndex = i + 1;
   wrap.style.left = nowleft + 'px';
})

其实本文在控制从最后一个图偷偷换回第一张图的操作是有缺陷的,因为要把控序号5的图滑动到序号为r1的图是需要1s的,然而wrap.style.left是直接发生变化的,不会随着过渡期间发生位移而left一直变化。所以把控序号5完整滑动到r1后再偷偷切换到序号1的时间是有些难控制的。

而且比如从序号1连续点击3下是可以切换到序号4的。然是从序号5连续点击3下是不可以的,在r1切换到序号1的时候是无法响应点击效果的,因此此处交互差异会容易感到别扭。

如果想改善这个别扭的bug,可以用下防抖来改善。

Javascript 相关文章推荐
javascript学习笔记(二十) 获得和设置元素的特性(属性)
Jun 20 Javascript
javascript简单实现图片预加载
Dec 03 Javascript
探究JavaScript函数式编程的乐趣
Dec 14 Javascript
详解js的事件处理函数和动态创建html标记方法
Dec 16 Javascript
JavaScript实现前端分页控件
Apr 19 Javascript
浅谈angularjs依赖服务注入写法的注意点
Apr 24 Javascript
Vue 页面状态保持页面间数据传输的一种方法(推荐)
Nov 01 Javascript
Bootstrap的aria-label和aria-labelledby属性实例详解
Nov 02 Javascript
微信小程序云开发实现云数据库读写权限
May 17 Javascript
vue输入节流,避免实时请求接口的实例代码
Oct 30 Javascript
微信小程序返回上一页传参并刷新过程解析
Dec 13 Javascript
js数组相减简单示例【删除a数组所有与b数组相同元素】
Mar 04 Javascript
几款主流好用的富文本编辑器(所见即所得常用编辑器)介绍
vue+flask实现视频合成功能(拖拽上传)
Mar 04 #Vue.js
React服务端渲染原理解析与实践
Mar 04 #Javascript
vue打开新窗口并实现传参的图文实例
Mar 04 #Vue.js
Vue-router编程式导航的两种实现代码
Mar 04 #Vue.js
手写Vue2.0 数据劫持的示例
Mar 04 #Vue.js
vue3.0封装轮播图组件的步骤
Mar 04 #Vue.js
You might like
一个简单的自动发送邮件系统(一)
2006/10/09 PHP
PHP实现的交通银行网银在线支付接口ECSHOP插件和使用例子
2014/05/10 PHP
php利用cookies实现购物车的方法
2014/12/10 PHP
详解PHP中的状态模式编程
2015/08/11 PHP
php框架CodeIgniter使用redis的方法分析
2018/04/13 PHP
thinkPHP5框架路由常用知识点汇总
2019/09/15 PHP
最佳的addEvent事件绑定是怎样诞生的
2011/10/24 Javascript
JS分页效果示例
2013/10/11 Javascript
vue中计算属性(computed)、methods和watched之间的区别
2017/07/27 Javascript
javascript 面向对象实战思想分享
2017/09/07 Javascript
浅谈Vue数据绑定的原理
2018/01/08 Javascript
在Vue里如何把网页的数据导出到Excel的方法
2020/09/30 Javascript
vue3自定义dialog、modal组件的方法
2021/01/04 Vue.js
Python脚本实现网卡流量监控
2015/02/14 Python
pandas把dataframe转成Series,改变列中值的类型方法
2018/04/10 Python
TensorFlow实现简单卷积神经网络
2018/05/24 Python
Python文件监听工具pyinotify与watchdog实例
2018/10/15 Python
python 画出使用分类器得到的决策边界
2019/08/21 Python
Python从列表推导到zip()函数的5种技巧总结
2019/10/23 Python
python pygame实现球球大作战
2019/11/25 Python
Python手绘可视化工具cutecharts使用实例
2019/12/05 Python
python如何通过pyqt5实现进度条
2020/01/20 Python
Python 程序报错崩溃后如何倒回到崩溃的位置(推荐)
2020/06/23 Python
CSS Grid布局教程之什么是网格布局
2014/12/30 HTML / CSS
新西兰领先的鞋类和靴子网上商城:Merchant 1948
2017/09/08 全球购物
买卖正宗运动鞋:GOAT
2019/12/06 全球购物
LINUX下线程,GDI类的解释
2016/12/14 面试题
优秀教师主要事迹
2014/02/01 职场文书
解除劳动关系协议书范文
2014/09/11 职场文书
2015入党个人自传范文
2015/06/26 职场文书
采购员工作总结范文
2015/08/12 职场文书
建议书的格式及范文
2015/09/14 职场文书
大学生团支书竞选稿
2015/11/21 职场文书
2016年学校招生广告语
2016/01/28 职场文书
一篇文章带你搞懂Python类的相关知识
2021/05/20 Python
详解Vue router路由
2021/11/20 Vue.js