原生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 相关文章推荐
JavaScript 继承详解(一)
Jul 13 Javascript
js算法中的排序、数组去重详细概述
Oct 14 Javascript
javascript 终止函数执行操作
Feb 14 Javascript
jquery实现html页面 div 假分页有原理有代码
Sep 06 Javascript
jQuery grep()方法详解及实例代码
Oct 30 Javascript
JavaScript基于扩展String实现替换字符串中index处字符的方法
Jun 13 Javascript
vue 运用mock数据的示例代码
Nov 07 Javascript
浅谈vue方法内的方法使用this的问题
Sep 15 Javascript
微信小程序实现带缩略图轮播效果
Nov 04 Javascript
微信小程序一周时间表功能实现
Oct 17 Javascript
高效jQuery选择器的5个技巧实例分析
Nov 26 jQuery
JavaScript中常用的3种弹出提示框(alert、confirm、prompt)
Nov 10 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
php中文验证码实现示例分享
2014/01/12 PHP
php检查字符串中是否包含7位GSM字符的方法
2015/03/17 PHP
php实现中文转数字
2016/02/18 PHP
PHP调试的强悍利器之PHPDBG
2016/02/22 PHP
Laravel模型事件的实现原理详解
2018/03/14 PHP
PHP连接MySQL数据库并以json格式输出
2018/05/21 PHP
php+iframe 实现上传文件功能示例
2020/03/04 PHP
jquery下onpropertychange事件的绑定方法
2010/08/01 Javascript
在js文件中如何获取basePath处理js路径问题
2013/07/10 Javascript
JavaScript 函数惰性载入的实现及其优点介绍
2013/08/12 Javascript
javascript实现2048游戏示例
2014/05/04 Javascript
鼠标悬浮停留三秒后自动显示大图js代码
2014/09/09 Javascript
JavaScript中String.match()方法的使用详解
2015/06/06 Javascript
基于javascript代码检测访问网页的浏览器呈现引擎、平台、Windows操作系统、移动设备和游戏系统
2015/12/03 Javascript
详解js图片轮播效果实现原理
2015/12/17 Javascript
JavaScript中常见的八个陷阱总结
2017/06/28 Javascript
详解nodejs通过代理(proxy)发送http请求(request)
2017/09/22 NodeJs
详解React Native 采用Fetch方式发送跨域POST请求
2017/11/15 Javascript
three.js实现3D视野缩放效果
2017/11/16 Javascript
vue axios整合使用全攻略
2018/05/24 Javascript
Angular5.0 子组件通过service传递值给父组件的方法
2018/07/13 Javascript
深入理解Vue父子组件生命周期执行顺序及钩子函数
2018/08/12 Javascript
详解vue服务端渲染浏览器端缓存(keep-alive)
2018/10/12 Javascript
[47:20]DAC2018 4.4 淘汰赛 Optic vs Mineski 第一场
2018/04/05 DOTA
Python实现比较扑克牌大小程序代码示例
2017/12/06 Python
Python3.5常见内置方法参数用法实例详解
2019/04/29 Python
详解pytorch 0.4.0迁移指南
2019/06/16 Python
python实现的分层随机抽样案例
2020/02/25 Python
Python drop方法删除列之inplace参数实例
2020/06/27 Python
用CSS3将你的设计带入下个高度
2009/08/08 HTML / CSS
1688平价精选商城:阿里集团旗下,工厂出厂价格直销
2017/04/24 全球购物
轻松制作精彩视频:Animoto
2018/09/19 全球购物
电台编导求职信
2014/05/06 职场文书
作风建设年活动总结
2014/08/27 职场文书
2015年政风行风工作总结
2015/04/21 职场文书
六一亲子活动感想
2015/08/07 职场文书