原生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与CSS写在同一个文件里的书写方法
Jun 02 Javascript
用js实现层随着内容大小动态渐变改变 推荐
Dec 19 Javascript
jquery 获取dom固定元素 添加样式的简单实例
Feb 04 Javascript
jQuery中removeClass()方法用法实例
Jan 05 Javascript
简介JavaScript中的italics()方法的使用
Jun 08 Javascript
Javascript字符串常用方法详解
Jul 21 Javascript
jQuery设置图片等比例缩小的方法
Apr 29 jQuery
使用D3.js创建物流地图的示例代码
Jan 27 Javascript
尝试自己动手用react来写一个分页组件(小结)
Feb 09 Javascript
vue中设置、获取、删除cookie的方法
Sep 21 Javascript
vue项目中axios请求网络接口封装的示例代码
Dec 18 Javascript
vue+elementui通用弹窗的实现(新增+编辑)
Jan 07 Vue.js
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
一个简单的自动发送邮件系统(二)
2006/10/09 PHP
php fckeditor 调用的函数
2009/06/21 PHP
修改PHP的memory_limit限制的方法分享
2012/02/21 PHP
php 强制下载文件实现代码
2013/10/28 PHP
PHP的mysqli_query参数MYSQLI_STORE_RESULT和MYSQLI_USE_RESULT的区别
2014/09/29 PHP
PHP用mysql_insert_id()函数获得刚插入数据或当前发布文章的ID
2016/11/25 PHP
基于json的jquery地区联动效果代码
2011/07/06 Javascript
jQuery中end()方法用法实例
2015/01/08 Javascript
js判断文本框剩余可输入字数的方法
2015/02/04 Javascript
javascript常用方法总结
2015/05/14 Javascript
jQuery中extend函数详解
2015/07/13 Javascript
基于JavaScript操作DOM常用的API小结
2015/12/01 Javascript
基于javascript实现彩票随机数生成(升级版)
2020/04/17 Javascript
从零学习node.js之利用express搭建简易论坛(七)
2017/02/25 Javascript
yarn的使用与升级Node.js的方法详解
2017/06/04 Javascript
分析javascript原型及原型链
2018/03/18 Javascript
详解React项目的服务端渲染改造(koa2+webpack3.11)
2018/03/19 Javascript
微信小程序实现动态获取元素宽高的方法分析
2018/12/10 Javascript
原生JS实现的自动轮播图功能详解
2018/12/28 Javascript
微信小程序实现同时上传多张图片
2020/02/03 Javascript
详解JavaScript 的执行机制
2020/09/18 Javascript
Python使用matplotlib填充图形指定区域代码示例
2018/01/16 Python
利用Python实现在同一网络中的本地文件共享方法
2018/06/04 Python
Ubuntu下升级 python3.7.1流程备忘(推荐)
2018/12/10 Python
Python设计模式之建造者模式实例详解
2019/01/17 Python
python zip()函数的使用示例
2020/09/23 Python
使用CSS3实现圆角,阴影,透明
2014/12/23 HTML / CSS
戴尔新加坡官网:Dell Singapore
2020/12/13 全球购物
Ruby如何实现动态方法调用
2012/11/18 面试题
写好自荐信的要点
2013/11/06 职场文书
物业管理专业个人的自我评价
2013/11/19 职场文书
首次购房证明
2015/06/19 职场文书
工作自我评价范文
2019/03/21 职场文书
Vue elementUI表单嵌套表格并对每行进行校验详解
2022/02/18 Vue.js
python DataFrame中stack()方法、unstack()方法和pivot()方法浅析
2022/04/06 Python
Ruby GDBM操作简介及数据存储原理
2022/04/19 Ruby