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学习资源站点
Aug 29 Javascript
检测是否已安装 .NET Framework 3.5的js脚本
Feb 14 Javascript
Visual Studio中的jQuery智能提示设置方法
Mar 27 Javascript
JS实现Enter键跳转及控件获得焦点
Aug 12 Javascript
JS获取iframe中marginHeight和marginWidth属性的方法
Apr 01 Javascript
JavaScript里实用的原生API汇总
May 14 Javascript
JavaScript原生节点操作小结
Jan 17 Javascript
基于node.js express mvc轻量级框架实践
Sep 14 Javascript
AngularJS遍历获取数组元素的方法示例
Nov 11 Javascript
node.js监听文件变化的实现方法
Apr 17 Javascript
3分钟了解vue数据劫持的原理实现
May 01 Javascript
JavaScript动态检测密码强度原理及实现方法详解
Jun 11 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
用PHP写的MySQL数据库用户认证系统代码
2007/03/22 PHP
Php图像处理类代码分享
2012/01/19 PHP
php计算给定日期所在周的开始日期和结束日期示例
2017/02/06 PHP
php gethostbyname获取域名ip地址函数详解
2010/01/24 Javascript
html+css+js实现xp window界面及有关功能
2013/03/26 Javascript
JavaScript对象的property属性详解
2014/04/01 Javascript
jQuery中[attribute!=value]选择器用法实例
2014/12/31 Javascript
jQuery操作DOM之获取表单控件的值
2015/01/23 Javascript
JS实现CheckBox复选框全选、不选或全不选功能
2020/07/28 Javascript
jquery+ajax+text文本框实现智能提示完整实例
2016/07/09 Javascript
canvas实现图像放大镜
2017/02/06 Javascript
Bootstrap3 模态框使用实例
2017/02/22 Javascript
Angularjs处理页面闪烁的解决方法
2017/03/09 Javascript
微信小程序实现登录页云层漂浮的动画效果
2017/05/05 Javascript
Vue中父组件向子组件通信的方法
2017/07/11 Javascript
vue实现codemirror代码编辑器中的SQL代码格式化功能
2019/08/27 Javascript
python导出chrome书签到markdown文件的实例代码
2017/12/27 Python
python语言中with as的用法使用详解
2018/02/23 Python
Python拼接字符串的7种方法总结
2018/11/01 Python
Python实现字典按key或者value进行排序操作示例【sorted】
2019/05/03 Python
Python 格式化打印json数据方法(展开状态)
2020/02/27 Python
关于python中的xpath解析定位
2020/03/06 Python
Python3 selenium 实现QQ群接龙自动化功能
2020/04/17 Python
自定义Django_rest_framework_jwt登陆错误返回的解决
2020/10/18 Python
HTML5实现页面切换激活的PageVisibility API使用初探
2016/05/13 HTML / CSS
什么是触发器(trigger)? 触发器有什么作用?
2013/09/18 面试题
下列程序在32位linux或unix中的结果是什么
2015/01/26 面试题
Jdbc数据访问技术面试题
2012/03/30 面试题
企划专员岗位职责
2013/12/09 职场文书
大学生职业生涯规划书模板
2014/01/18 职场文书
2015年社区服务活动总结
2015/03/25 职场文书
挂职锻炼工作总结2015
2015/05/28 职场文书
毕业欢送会致辞
2015/07/29 职场文书
Python数据可视化之用Matplotlib绘制常用图形
2021/06/03 Python
Redis命令处理过程源码解析
2022/02/12 Redis