原生js实现无缝轮播图


Posted in Javascript onJanuary 11, 2020

本文实例为大家分享了js实现无缝轮播图的具体代码,供大家参考,具体内容如下

先上效果图

原生js实现无缝轮播图

原理图

原生js实现无缝轮播图

如图可见,是页面按顺序依次显示5张图片,包裹这五张图片的外层的盒子,我们叫ul,通过向左或右移动不同距离,实现在视图中显示的不同的图片,实现轮播,而同时下面的分页小球需要根据当前显示的内容进行点亮;

而无缝轮播图需要在第五张图片后面再加上第一张图片,这样通过右侧箭头,向右切换,当页面切换到第六张时,也就是最后一张图片,此时需要将ul的位置设置为第一张图的位置,然后从第一张图片滑动到第二张,形成一个无缝过渡;

同理,样通过左侧箭头,向左切换,已经显示到第一张图片时,再向左切换,ul会设置为到第五张图的位置,形成一个无缝过渡

html结构

<div class="wrapper">
 <div class="inner">
  <ul>
   <li>页面1</li>
   <li>页面2</li>
   <li>页面3</li>
   <li>页面4</li>
   <li>页面5</li>
   <li>页面1</li>
  </ul>
  <div class="circle">
   <span class="current">1</span>
   <span>2</span>
   <span>3</span>
   <span>4</span>
   <span>5</span>
  </div>
  <div class="direction">
   <span class="left"><</span>
   <span class="right">></span>
  </div>
 </div>
</div>

js代码

//获取页面元素
 var ul = document.getElementsByTagName("ul")[0];
 var inner = document.getElementsByClassName("inner")[0];
 var circle = document.getElementsByClassName("circle")[0];
 var spanArr = circle.children;
 var direction =document.getElementsByClassName("direction")[0];
 var dirChid=direction.children;
 var innerWidth = inner.offsetWidth;
 //两个定时器(一个记录图片,一个记录小圆球)
 var dindex = 0;
 var span = 0;
 //var ulNewLi = ul.children[0].cloneNode(true);
 // ul.appendChild(ulNewLi);
 for(var i = 0;i<spanArr.length;i++){
  //给每个span绑定index,为了和ul中的页面联动
  spanArr[i].index = i;
  spanArr[i].onmouseover = function () {
   //点击分页小球,添加current类,current类定义了小球的背景颜色
   for (var j = 0; j<spanArr.length ;j++) {
    spanArr[j].className = "";
   }
   this.className = "current";
   dindex = span = this.index;
   //调用缓动函数,传入参数:移动元素,目标距离
   animation(ul,-this.index*innerWidth);
  }
 }
 //为左箭头绑定事件
 //dindex 记录图片的索引,span记录小球的索引,图片个数为6,小球的个数为5
 dirChid[0].οnclick=function (event) {
  //每次点击左切换,图片的索引减一,小球的索引减一
  dindex--;
  //图片的索引<0时,设置ul的位置为第五个图片的位置
  if(dindex<0){
   ul.style.left= -innerWidth*spanArr.length+"px";
   dindex= spanArr.length-1;
  }
  animation(ul,-dindex*innerWidth);
  //小球的索引减一
  span--;
  //当小球索引小于0时,设置它的索引为4
  if(span<0){
   span= spanArr.length-1;
  }
  //点亮小球
  for(var i= 0 ; i<spanArr.length;i++){
   spanArr[i].className = "";
  }
  spanArr[span].className = "current";
 
 }
 //为右箭头绑定事件,
 dirChid[1].οnclick=function () {
  dindex++;
  //图片的索引大于小球长度个数时,设置ul的位置为第1张图片的位置
  if(dindex>spanArr.length){
   ul.style.left=0;
   dindex=1;
  }
  animation(ul,-dindex*innerWidth);
  span++;
  if(span>spanArr.length-1){
   span= 0;
  }
  for(var k= 0 ; k<spanArr.length;k++){
   spanArr[k].className = "";
  }
  spanArr[span].className = "current";
 
 }
 
 //封装缓动动画函数
 function animation(ele,target) {
  clearInterval(ele.timer);
  ele.timer=setInterval(function () {
   //获取起使位置
   leader= ele.offsetLeft;
   //获取缓动动画步长
   var step = (target-leader)/10;
   //支持不同方向的移动,所以步长有正有负
   step = step >0? Math.ceil(step):Math.floor(step);
   //当前位置= 盒子的位置+步长
   leader = leader +step;
   ele.style.left = leader+"px";
   if(ele.offsetLeft === target) {
    clearInterval(ele.timer);
   }
  },30)
 
}

精彩专题分享:jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js loading加载效果实现代码
Nov 24 Javascript
javascript五图轮播切换实用版
Aug 17 Javascript
JS嵌套函数调用上下文的问题解决
Mar 26 Javascript
javascript中基本类型和引用类型的区别分析
May 12 Javascript
JS HTML5实现拖拽移动列表效果
Aug 27 Javascript
vue.js学习笔记之绑定style样式和class列表
Oct 31 Javascript
最细致的vue.js基础语法 值得收藏!
Nov 03 Javascript
webpack配置的最佳实践分享
Apr 21 Javascript
JS获取子、父、兄节点方法小结
Aug 14 Javascript
JavaScript实现简单动态进度条效果
Apr 06 Javascript
react.js组件实现拖拽复制和可排序的示例代码
Aug 20 Javascript
前端监听websocket消息并实时弹出(实例代码)
Nov 27 Javascript
JS实现轮播图效果
Jan 11 #Javascript
js实现带搜索功能的下拉框
Jan 11 #Javascript
js实现select下拉框选择
Jan 11 #Javascript
js实现二级联动简单实例
Jan 11 #Javascript
jQuery实现轮播图效果demo
Jan 11 #jQuery
详解微信小程序中var、let、const用法与区别
Jan 11 #Javascript
jQuery擦除插件eraser使用方法详解
Jan 11 #jQuery
You might like
SONY ICF-SW55的电路分析
2021/03/02 无线电
通过table标签,PHP输出EXCEL的实现方法
2013/07/24 PHP
在SAE上搭建最新wordpress的方法
2014/12/21 PHP
Thinkphp5.0自动生成模块及目录的方法详解
2017/04/17 PHP
PHP实现的mysql读写分离操作示例
2018/05/22 PHP
讨论javascript(一)工厂方式 js面象对象的定义方法
2009/12/15 Javascript
javascript Firefox与IE 替换节点的方法
2010/02/24 Javascript
jQuery示例收集
2010/11/05 Javascript
如何通过javascript操作web控件的自定义属性
2013/11/25 Javascript
JS动态添加Table的TR,TD实现方法
2015/01/28 Javascript
使用pjax实现无刷新更改页面url
2015/02/05 Javascript
javascript模拟map输出与去除重复项的方法
2015/02/09 Javascript
jQuery实现进度条效果代码
2015/12/17 Javascript
微信小程序 火车票查询实例讲解
2016/10/17 Javascript
详解vue中使用express+fetch获取本地json文件
2017/10/10 Javascript
vue + webpack如何绕过QQ音乐接口对host的验证详解
2018/07/01 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【凹多边形的分离轴检测算法】
2018/12/13 Javascript
Vue自定义属性实例分析
2019/02/23 Javascript
微信公众平台 客服接口发消息的实现代码(Java接口开发)
2019/04/17 Javascript
Vue+Typescript中在Vue上挂载axios使用时报错问题
2019/08/07 Javascript
在Python中使用matplotlib模块绘制数据图的示例
2015/05/04 Python
python实现下载文件的三种方法
2017/02/09 Python
Python3学习笔记之列表方法示例详解
2017/10/06 Python
windows环境下tensorflow安装过程详解
2018/03/30 Python
用Python实现BP神经网络(附代码)
2019/07/10 Python
将tensorflow模型打包成PB文件及PB文件读取方式
2020/01/23 Python
python中添加模块导入路径的方法
2021/02/03 Python
中国最大的团购网站:聚划算
2016/09/21 全球购物
金融专业个人求职信范文
2013/11/28 职场文书
幼儿园优秀教师事迹
2014/02/13 职场文书
手机银行营销方案
2014/03/14 职场文书
教师自我剖析材料(群众路线)
2014/09/29 职场文书
夫妻分居协议书范本
2014/11/28 职场文书
考研经验交流会策划书
2015/11/02 职场文书
2016北大自主招生自荐信模板
2016/01/28 职场文书
Python中的pprint模块
2021/11/27 Python