原生JS实现无缝轮播图片


Posted in Javascript onJune 24, 2020

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

运动插件

function animove(obj,distance,speed,callback) { //调用的变量 目标距离 速度 回调函数
 clearInterval(obj.timer);
 obj.timer = setInterval(function () {
  let step = (distance - obj.offsetLeft) / 10;
  step = step > 0 ? Math.ceil(step) : Math.floor(step);
  if (obj.offsetLeft == distance) {
  clearInterval(obj.timer);
  if (callback) {
   callback();
  }
  }
  obj.style.left = obj.offsetLeft + step + 'px';
 },speed)
}

CSS代码

* {
  margin: 0;
  padding: 0;
 }
 ul,li {
  list-style: none;
 }
 .box {
  width: 1226px;
  height: 460px;
  margin: 100px auto;
  position: relative;
  overflow: hidden;
 }
 .pic-box {
  width: 4904px;
  position: absolute;
 }
 .pic-box > li {
  float: left;
 }
 .point {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
 }
 .point > li {
  float: left;
  width: 8px;
  height: 8px;
  border: 1px solid blueviolet;
  margin: 0 4px;
  border-radius: 50%;
 }
 .point > .active {
  background-color: orange;
 }
 .left-btn,
 .right-btn {
  width: 50px;
  height: 40px;
  background-color: rgba(0,0,0,.5);
  text-align: center;
  line-height: 40px;
  font-size: 20px;
  color: white;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
 }
 .left-btn {
  left: 0;
 }
 .right-btn {
  right: 0;
 }

HTML代码

<div class="box">
 <ul class="pic-box">
  <li>
  <img src="lb.webp" alt="">
  </li>
  <li>
  <img src="lb2.webp" alt="">
  </li>
  <li>
  <img src="pic3.jpg" alt="">
  </li>
 </ul>
 <ul class="point">
 </ul>
 <div class="left-btn"><</div>
 <div class="right-btn">></div>
 </div>
<script src="运动插件.js"></script>

js代码

let picbox = document.querySelector('.pic-box');
 let pic = document.querySelectorAll('.pic-box > li'); //由于获取的不是动态的 所以之后的克隆 并不会使这个变量发生改变
 let point = document.querySelector('.point');
 let leftbtn = document.querySelector('.left-btn');
 let rightbtn = document.querySelector('.right-btn');
 let carouselindex = 0;
 //通过for循环 生成小圆点 并将圆点添加到ul里
 for (let i = 0; i < pic.length; i ++) {
  let pointli = document.createElement('li');
  pointli.classList.add(i);
  point.appendChild(pointli);
 }
 //给第一个小圆点默认添加active
 point.children[0].classList.add('active');

 //克隆第一个图片 深度
 let kelon = picbox.children[0].cloneNode(true);
 picbox.appendChild(kelon); //将图片添加到最后位置

 //获取所以圆点
 let pointli = document.getElementsByClassName('point')[0].getElementsByTagName('li');

 //轮播方法
 function carousel(index) {
  let distance = (-index * pic[0].offsetWidth); //计算行走的距离 图片的index值乘以图片的大小
  animove(picbox,distance,10); //调用运动函数
  for (let i = 0; i < pointli.length; i ++) { //for循环移除每个小点的选中状态
  pointli[i].classList.remove('active');
  }
  if (index != pic.length) { //如果不等于pic的长度 就执行
  pointli[index].classList.add('active');
  } else { //如果索引值为3 说明此时图片为克隆的图 而圆点的最大索引值为2 将第一个圆点设置为active即可正常显示圆点状态
  point.children[0].classList.add('active');
  }
 }
 Array.prototype.forEach.call(pointli,function (item,index) { //给每个圆点添加点击事件
  item.addEventListener('click',function () {
   carouselindex = index;  //将点击的索引值赋值给轮播索引全局变量
   carousel(carouselindex);
  })
 });
 rightbtn.addEventListener('click',function () { //右边点击事件
  carouselindex ++; //每次点击全局轮播索引增加
  if (carouselindex > pic.length) { //如果索引大于图片数量 由于数量大小获取的是静态的 所以长度不会因为克隆变化而变化
   picbox.style.left = "0px"; //如果大于索引说明此时要离开克隆的那张图 此时迅速将left值设置为0
   carouselindex = 1; //然后将索引设置为1
  }
  carousel(carouselindex); //这时候就在left为0的位置 过渡到索引1的位置 实现无缝轮播的效果
 });
 leftbtn.addEventListener('click',function () { //左边点击事件
  carouselindex --; //减减
  if (carouselindex < 0) { //如果索引值小于0
  carouselindex = 2; //将索引值设置为2
  picbox.style.left = "-3678px"; //将位置迅速变换为第四张图的位置(克隆的图)
  }
  carousel(carouselindex); //由克隆的图过渡到索引为2的图(第三张图)
})

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

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

Javascript 相关文章推荐
javascript 进度条 实现代码
Jul 30 Javascript
从盛大通行证上摘下来的身份证验证js代码
Jan 11 Javascript
table对象中的insertRow与deleteRow使用示例
Jan 26 Javascript
javascript 事件处理示例分享
Dec 31 Javascript
Bootstrap每天必学之简单入门
Nov 19 Javascript
jQuery实现带水平滑杆的焦点图动画插件
Mar 08 Javascript
再次谈论Javascript中的this
Jun 23 Javascript
JavaScript之filter_动力节点Java学院整理
Jun 28 Javascript
理解Angular的providers给Http添加默认headers
Jul 04 Javascript
angular2中Http请求原理与用法详解
Jan 11 Javascript
Element Badge标记的使用方法
Jul 27 Javascript
浅谈Vue使用Elementui修改默认的最快方法
Dec 05 Vue.js
如何利用Node.js与JSON搭建简单的动态服务器
Jun 16 #Javascript
js+css实现全屏侧边栏
Jun 16 #Javascript
JavaScript装箱及拆箱boxing及unBoxing用法解析
Jun 15 #Javascript
通过实例解析JavaScript for in及for of区别
Jun 15 #Javascript
vue proxy 的优势与使用场景实现
Jun 15 #Javascript
原生JS利用transform实现banner的无限滚动示例代码
Jun 15 #Javascript
koa中间件核心(koa-compose)源码解读分析
Jun 15 #Javascript
You might like
PHP开发中常用的8个小技巧
2008/08/27 PHP
php 中文和编码判断代码
2010/05/16 PHP
开启CURL扩展,让服务器支持PHP curl函数(远程采集)
2011/03/19 PHP
php学习笔记 类的声明与对象实例化
2011/06/13 PHP
CodeIgniter集成smarty的方法详解
2016/05/26 PHP
PHP5中使用mysqli的prepare操作数据库的介绍
2019/03/18 PHP
JavaScript将Table导出到Excel实现思路及代码
2013/03/13 Javascript
Javascript表单验证要注意的事项
2014/09/29 Javascript
javascript动态添加删除tabs标签的方法
2015/07/06 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(下)
2015/10/28 Javascript
Bootstrap3 input输入框插入glyphicon图标的方法
2016/05/16 Javascript
JavaScript中获取HTML元素值的三种方法
2016/06/20 Javascript
在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口的方法
2016/08/05 Javascript
JavaScript 异步调用
2017/10/25 Javascript
jquery引入外部CDN 加载失败则引入本地jq库
2018/05/23 jQuery
详解Angular6学习笔记之主从组件
2018/09/05 Javascript
微信小程序页面间值传递的两种方法
2018/11/26 Javascript
微信小程序如何刷新当前界面的实现方法
2019/06/07 Javascript
JavaScript实现栈结构Stack过程详解
2020/03/07 Javascript
原生微信小程序开发中 redux 的使用详解
2021/02/18 Javascript
[52:20]DOTA2-DPC中国联赛正赛 SAG vs XGBO3 第一场 3月5日
2021/03/11 DOTA
zbar解码二维码和条形码示例
2014/02/07 Python
python实现在pickling的时候压缩的方法
2014/09/25 Python
初步探究Python程序的执行原理
2015/04/11 Python
使用pandas中的DataFrame数据绘制柱状图的方法
2018/04/10 Python
Python实现定时自动关闭的tkinter窗口方法
2019/02/16 Python
新手学python应该下哪个版本
2020/06/11 Python
基于python+selenium自动健康打卡的实现代码
2021/01/13 Python
探究 canvas 绘图中撤销(undo)功能的实现方式详解
2018/05/17 HTML / CSS
英国家电直销:Appliances Direct
2016/09/22 全球购物
美国指甲油品牌:Deco Miami
2017/01/30 全球购物
Java面向对象面试题
2016/12/26 面试题
计算机系毕业生推荐信
2013/11/06 职场文书
保安部任务及岗位职责
2014/02/25 职场文书
难忘的一课教学反思
2014/04/30 职场文书
2015年医院科室工作总结范文
2015/05/26 职场文书