原生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 相关文章推荐
jQuery 行级解析读取XML文件(附源码)
Oct 12 Javascript
ASP.NET中AJAX 调用实例代码
May 03 Javascript
JQuery调webservice实现邮箱验证(检测是否可用)
May 21 Javascript
javascript中加号(+)操作符的一些神奇作用
Jun 06 Javascript
Javascript无参数和有参数类继承问题解决方法
Mar 02 Javascript
js变形金刚文字特效代码分享
Aug 20 Javascript
jquery中object对象循环遍历的方法
Dec 18 Javascript
AngularJS实现textarea记录只能输入规定数量的字符并显示
Apr 26 Javascript
JS 清除字符串数组中,重复元素的实现方法
May 24 Javascript
浅谈$('div a') 与$('div&gt;a')的区别
Jul 18 Javascript
微信小程序修改checkbox的样式代码实例
Jan 21 Javascript
vue实现树状表格效果
Dec 29 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 Session存储到Redis的方法
2013/11/04 PHP
简单的php中文转拼音的实现代码
2014/02/11 PHP
PHP mongodb操作类定义与用法示例【适合mongodb2.x和mongodb3.x】
2018/06/16 PHP
PHP常见数组排序方法小结
2018/08/20 PHP
基于jquery的设置页面文本框 只能输入数字的实现代码
2011/04/19 Javascript
关于JS字符串函数String.replace()
2013/04/07 Javascript
js制作简易年历完整实例
2015/01/28 Javascript
异步JS框架的作用以及实现方法
2015/10/29 Javascript
浅谈jquery点击label触发2次的问题
2016/06/12 Javascript
AngularJs Injecting Services Into Controllers详解
2016/09/02 Javascript
深入了解JavaScript的逻辑运算符(与、或)
2016/12/20 Javascript
浅谈vue实现数据监听的函数 Object.defineProperty
2017/06/08 Javascript
Vue利用路由钩子token过期后跳转到登录页的实例
2017/10/26 Javascript
Vue结合后台导入导出Excel问题详解
2019/02/19 Javascript
用VueJS写一个Chrome浏览器插件的实现方法
2019/02/27 Javascript
8个有意思的JavaScript面试题
2019/07/30 Javascript
在python中的socket模块使用代理实例
2014/05/29 Python
python检测远程udp端口是否打开的方法
2015/03/14 Python
python虚拟环境virualenv的安装与使用
2016/12/18 Python
python3 pillow生成简单验证码图片的示例
2017/09/19 Python
对pandas数据判断是否为NaN值的方法详解
2018/11/06 Python
Django自定义用户登录认证示例代码
2019/06/30 Python
python中for循环把字符串或者字典添加到列表的方法
2019/07/20 Python
python读取当前目录下的CSV文件数据
2020/03/11 Python
什么是Python变量作用域
2020/06/03 Python
python实现发送邮件
2021/03/02 Python
关于css兼容性问题及一些常见问题汇总
2016/05/03 HTML / CSS
HTML5新增的Css选择器、伪类介绍
2013/08/07 HTML / CSS
俄罗斯品牌服装和鞋子的在线商店:KUPIVIP
2019/10/27 全球购物
运动会入场解说词
2014/02/07 职场文书
2015年度党员个人总结
2015/02/14 职场文书
2015年药房工作总结
2015/04/25 职场文书
旗帜观后感
2015/06/08 职场文书
物业管理交接协议书
2016/03/24 职场文书
JS的深浅复制详细
2021/10/16 Javascript
Redis命令处理过程源码解析
2022/02/12 Redis