原生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学习笔记(一) 编写高质量代码
Aug 09 Javascript
window.open不被拦截的实现代码
Aug 22 Javascript
Jquery创建一个层当鼠标移动到层上面不消失效果
Dec 12 Javascript
jquery获取radio值(单选组radio)
Oct 16 Javascript
jquery+json实现动态商品内容展示的方法
Jan 14 Javascript
BootStrap中Tab页签切换实例代码
May 30 Javascript
Jquery AJAX POST与GET之间的区别详细介绍
Oct 17 Javascript
jquery实现轮播图效果
Feb 13 Javascript
原生javascript移动端滑动banner效果
Mar 10 Javascript
layUI实现列表查询功能
Jul 27 Javascript
基于Cesium绘制抛物弧线
Nov 18 Javascript
详解JS WebSocket断开原因和心跳机制
May 07 Javascript
如何利用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 5昨天隆重推出--PHP 5/Zend Engine 2.0新特性
2006/10/09 PHP
php中time()和mktime()方法的区别
2013/09/28 PHP
php读取torrent种子文件内容的方法(测试可用)
2016/05/03 PHP
php实现的数组转xml案例分析
2019/09/28 PHP
Laravel解决nesting level错误和隐藏index.php的问题
2019/10/12 PHP
PHP单元测试配置与使用方法详解
2019/12/27 PHP
另类调用flash无须激活的方法
2006/12/27 Javascript
仿中关村在线首页弹出式广告插件(jQuery版)
2012/05/03 Javascript
js页面跳转的问题(跳转到父页面、最外层页面、本页面)
2013/08/14 Javascript
jQuery实现购物车计算价格功能的方法
2015/03/25 Javascript
js中setTimeout()与clearTimeout()用法实例浅析
2015/05/12 Javascript
AngularJS基础 ng-paste 指令简单示例
2016/08/02 Javascript
jQuery实现动态控制页面元素的方法分析
2017/12/20 jQuery
浅谈Vue Element中Select下拉框选取值的问题
2018/03/01 Javascript
Vue CLI3 开启gzip压缩文件的方式
2018/09/30 Javascript
[01:00:44]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第三局
2016/03/04 DOTA
python自定义异常实例详解
2017/07/11 Python
python 连接各类主流数据库的实例代码
2018/01/30 Python
numpy.delete删除一列或多列的方法
2018/04/03 Python
django利用request id便于定位及给日志加上request_id
2018/08/26 Python
Python数据结构之栈、队列及二叉树定义与用法浅析
2018/12/27 Python
python cv2读取rtsp实时码流按时生成连续视频文件方式
2019/12/25 Python
Python3监控疫情的完整代码
2020/02/20 Python
python 实现仿微信聊天时间格式化显示的代码
2020/04/17 Python
python模拟哔哩哔哩滑块登入验证的实现
2020/04/24 Python
Python PyQt5运行程序把输出信息展示到GUI图形界面上
2020/04/27 Python
Django跨域请求原理及实现代码
2020/11/14 Python
python基于opencv 实现图像时钟
2021/01/04 Python
html5应用缓存_动力节点Java学院整理
2017/07/13 HTML / CSS
JPA的特点
2014/10/25 面试题
农村婚礼证婚词
2014/01/10 职场文书
优质护理服务演讲稿
2014/05/07 职场文书
有关环保的标语
2014/06/13 职场文书
本科毕业论文导师评语
2014/12/31 职场文书
部队2015年终工作总结
2015/04/02 职场文书
2015年出纳年终工作总结
2015/05/14 职场文书