原生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 相关文章推荐
深入document.write()与HTML4.01的非成对标签的详解
May 08 Javascript
解析javascript 数组以及json元素的添加删除
Jun 26 Javascript
自定义函数实现IE7与IE8不兼容js中trim函数的问题
Feb 03 Javascript
分享自己用JS做的扫雷小游戏
Feb 17 Javascript
在AngularJS框架中处理数据建模的方式解析
Mar 05 Javascript
javascript事件冒泡简单示例
Jun 20 Javascript
vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)
Mar 30 Javascript
微信小程序点击控件修改样式实例详解
Jul 07 Javascript
three.js中文文档学习之创建场景
Nov 20 Javascript
关于Angularjs中自定义指令一些有价值的细节和技巧小结
Apr 22 Javascript
原生js实现的观察者和订阅者模式简单示例
Apr 18 Javascript
Vue实现简单计算器
Jan 20 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使用数组依次替换字符串中匹配项
2016/01/08 PHP
PHP自定义图片缩放函数实现等比例不失真缩放的方法
2016/08/19 PHP
PHP实现mysqli批量执行多条语句的方法示例
2017/07/22 PHP
thinkPHP框架乐观锁和悲观锁实例分析
2019/10/30 PHP
php实现通过stomp协议连接ActiveMQ操作示例
2020/02/23 PHP
JavaScript 继承详解(三)
2009/07/13 Javascript
浅析Cookie中的Path与domain
2013/12/18 Javascript
node.js中的fs.fchownSync方法使用说明
2014/12/16 Javascript
JavaScript错误处理
2015/02/03 Javascript
VUE页面中加载外部HTML的示例代码
2017/09/20 Javascript
微信小程序onLaunch异步,首页onLoad先执行?
2018/09/20 Javascript
Vux+Axios拦截器增加loading的问题及实现方法
2018/11/08 Javascript
详解项目升级到vue-cli3的正确姿势
2019/01/28 Javascript
Vue Prop属性功能与用法实例详解
2019/02/23 Javascript
通过循环优化 JavaScript 程序
2019/06/24 Javascript
6种JavaScript继承方式及优缺点(小结)
2020/02/06 Javascript
Python深入06——python的内存管理详解
2016/12/07 Python
Python实现统计文本文件字数的方法
2017/05/05 Python
Flask之flask-script模块使用
2018/07/26 Python
python实现电子产品商店
2019/02/26 Python
详解Python中的测试工具
2019/06/09 Python
Python实现的统计文章单词次数功能示例
2019/07/08 Python
django框架ModelForm组件用法详解
2019/12/11 Python
详解python常用命令行选项与环境变量
2020/02/20 Python
地图可视化神器kepler.gl python接口的使用方法
2020/12/22 Python
Pycharm 如何一键加引号的方法步骤
2021/02/05 Python
CSS3不透明度实例讲解
2016/04/26 HTML / CSS
jurlique茱莉蔻英国官网:澳洲天然护肤品
2018/08/03 全球购物
《乡愁》教学反思
2014/02/18 职场文书
售前工程师职业生涯规划
2014/03/02 职场文书
早会开场白台词大全
2015/06/01 职场文书
退货证明模板
2015/06/23 职场文书
导游词之泉州崇武古城
2019/12/20 职场文书
CSS 使用 resize 实现图片拖拽切换预览功能(强大功能)
2021/08/23 HTML / CSS
MySQL的索引你了解吗
2022/03/13 MySQL
Golang 结构体数据集合
2022/04/22 Golang