原生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 Array数组对象的扩展函数代码
May 22 Javascript
javascript创建数组之联合数组的使用方法示例
Dec 26 Javascript
jQuery中.live()方法的用法深入解析
Dec 30 Javascript
jQuery实现异步获取json数据的2种方式
Aug 29 Javascript
Node.js巧妙实现Web应用代码热更新
Oct 22 Javascript
jquery.multiselect多选下拉框实现代码
Nov 11 Javascript
JavaScript实现多栏目切换效果
Dec 12 Javascript
使用BootStrap实现标签切换原理解析
Mar 14 Javascript
vue.js数据绑定的方法(单向、双向和一次性绑定)
Jul 13 Javascript
vue中实现高德定位功能
Dec 03 Javascript
5分钟快速看懂ES6中的反射与代理
Dec 19 Javascript
在js中修改html body的样式
Nov 11 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连接mssql:pdo odbc sql server
2011/07/20 PHP
mac下安装nginx和php
2013/11/04 PHP
php打开远程文件的方法和风险及解决方法
2013/11/12 PHP
php中实现精确设置session过期时间的方法
2014/07/17 PHP
PHP随机生成信用卡卡号的方法
2015/03/23 PHP
Jquery getJSON方法详细分析
2013/12/26 Javascript
JavaScript设计模式之观察者模式(发布者-订阅者模式)
2014/09/24 Javascript
jQuery中toggleClass()方法用法实例
2015/01/05 Javascript
javascript中eval函数用法分析
2015/04/25 Javascript
javascript实现3D变换的立体圆圈实例
2015/08/06 Javascript
jQuery实现的仿select功能代码
2015/08/19 Javascript
Window.Open打开窗体和if嵌套代码
2016/04/15 Javascript
原生JS实现旋转木马式图片轮播插件
2016/04/25 Javascript
js实现常用排序算法
2016/08/09 Javascript
解决vue2中使用axios http请求出现的问题
2018/03/05 Javascript
Vue中多元素过渡特效的解决方案
2020/02/05 Javascript
Python Trie树实现字典排序
2014/03/28 Python
理解Python中的With语句
2015/02/02 Python
python生成九宫格图片
2018/11/19 Python
python爬虫使用requests发送post请求示例详解
2020/08/05 Python
Python gevent协程切换实现详解
2020/09/14 Python
html5 input属性使用示例
2013/06/28 HTML / CSS
涉外经济法专业毕业生推荐信
2013/11/24 职场文书
行政文秘岗位职责范本
2014/02/10 职场文书
小学阳光体育活动总结
2014/07/05 职场文书
毕业横幅标语
2014/10/08 职场文书
见习报告的格式
2014/10/31 职场文书
2014年社区个人工作总结
2014/12/02 职场文书
2015年大学生党员承诺书
2015/04/27 职场文书
2015年学校教科室工作总结
2015/07/20 职场文书
防溺水安全教育主题班会
2015/08/12 职场文书
2016重阳节红领巾广播稿
2015/12/18 职场文书
创业计划书之酒厂
2019/10/14 职场文书
Python激活Anaconda环境变量的详细步骤
2021/06/08 Python
如何使用SQL Server语句创建表
2022/04/12 SQL Server
MySQL使用IF语句及用case语句对条件并结果进行判断 
2022/09/23 MySQL