原生js实现无缝轮播图效果


Posted in Javascript onJanuary 28, 2021

原生js实现轮播图效果(无缝滚动) ,供大家参考,具体内容如下

效果图:

原生js实现无缝轮播图效果

代码:

<!DOCTYPE html>
<html lang="en">
<!-- day07 7-10-14 -->
 
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <script src="./images1/20.animate.js"></script>
 <style>
 * {
  margin: 0;
  padding: 0;
 }
 
 li {
  list-style: none;
 }
 
 .focus {
  /*overflow: hidden;*/
  position: absolute;
  top: 100px;
  left: 200px;
  width: 721px;
  height: 455px;
  background-color: brown;
 }
 
 .prev,
 .next {
  display: none;
  position: absolute;
  top: 50%;
  margin-top: -15px;
  width: 20px;
  height: 30px;
  background-color: rgba(0, 0, 0, .3);
  text-decoration: none;
  color: #fff;
  line-height: 30px;
  text-align: center;
  font-size: 16px;
  z-index: 2;
 }
 
 .focus ul {
  /* 引入动画js文件要求必须有定位 */
  position: absolute;
  width: 600%;
 }
 
 .focus ul li {
  float: left;
 }
 
 .prev {
  left: 0;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
 }
 
 .next {
  right: 0;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
 }
 
 .promo-nav {
  position: absolute;
  bottom: 10px;
  left: 60px;
  width: 200px;
  height: 18px;
  border-radius: 9px;
 }
 
 .promo-nav li {
  float: left;
  width: 10px;
  height: 10px;
  background-color: #fff;
  margin: 2px;
  border-radius: 50%;
 }
 
 .promo-nav .current {
  background-color: orange;
 }
 .focus ul li a img {
  width: 721px;
  height: 455px;
 }
 </style>
</head>
 
<body>
 <div class="focus">
 <ul>
  <li>
  <a href="#" ><img src="images1/focu01.jpg" alt=""></a>
  </li>
  <li>
  <a href="#" ><img src="images1/focu02.jpg" alt=""></a>
  </li>
 
  <li>
  <a href="#" ><img src="images1/focu03.jpg" alt=""></a>
  </li>
  <li>
  <a href="#" ><img src="images1/focu04.jpg" alt=""></a>
  </li>
 
 </ul>
 <!-- 左侧按钮 -->
 <a href="javascript:;" class="prev"><</a>
 <!-- 右侧按钮 -->
 <a href="javascript:;" class="next">></a>
 
 <ol class="promo-nav">
 
 </ol>
 </div>
 <script>
 window.addEventListener('load', function() {
  var focus = document.querySelector('.focus');
  var prev = document.querySelector('.prev');
  var next = document.querySelector('.next');
  var focusWidth = focus.offsetWidth;
  //鼠标经过
  focus.addEventListener('mouseenter', function() {
   prev.style.display = 'block';
   next.style.display = 'block';
   clearInterval(timer);
   timer = null; //清除定时器变量
 
  })
  //鼠标离开
  focus.addEventListener('mouseleave', function() {
   prev.style.display = 'none';
   next.style.display = 'none';
   timer = setInterval(function() {
   next.click();
   }, 2000)
 
  })
  //3.动态生成小圆圈 有几张图片 就生成几个小圆圈
  var ul = focus.querySelector('ul');
  var ol = focus.querySelector('.promo-nav');
  // console.log(ul.children.length); 4
  for (var i = 0; i < ul.children.length; i++) {
  //创建一个li
  var li = document.createElement('li');
  //记录当前小圆圈的索引号 通过自定义属性来做
  li.setAttribute('index', i);
  //插入到ol后面
  ol.appendChild(li);
  //4.鼠标点击小圆圈小圆圈变色(给小圆圈添加current类其余小圆圈移除这个类)(排他思想)
  //在生成小圆圈的同时直接绑定点击事件
  li.addEventListener('click', function() {
   for (var i = 0; i < ol.children.length; i++) {
   ol.children[i].className = '';
   }
   this.className = 'current';
 
 
   //5.点击小圆点 移动图片 移动的是ul
   //ul移动的距离 小圆圈的索引号乘以图片宽度 注意是负值
   //当我们点击了某个小li就得到了当前小li的索引号
   var index = this.getAttribute('index');
   //当我们点击了某个li就把li的索引号给num
   num = index;
   //当我们点击了某个li就把li的索引号给index
   circle = index;
   console.log(index);
 
   animate(ul, -index * focusWidth, );
  })
 
  }
  //把ol里面的第一个li北京颜色设置成白色
  ol.children[0].className = 'current';
  //6. 克隆第一张li放到ul后面
  var first = ul.children[0].cloneNode(true);
  ul.appendChild(first);
  //7.点击右侧按钮图片滚动一张
  var num = 0;
  var circle = 0;
  var flag = true;
  //右侧按钮
  next.addEventListener('click', function() {
   if (flag) {
   flag = false; //先关闭节流阀
   //5.如果走到最后一张复制图片此时ul快速复原 left改为0(无缝滚动)
   if (num == ul.children.length - 1) {
    ul.style.left = 0;
    num = 0;
   }
   num++;
   animate(ul, -num * focusWidth, function() {
    flag = true;
   });
   //8.点击右侧按钮小圆圈跟随一起变化 声明一个变量控制小圆圈变化
   circle++;
   //如果 circle等于4说明做到最后克隆的这张图片了 我们就复原
   if (circle == ol.children.length) {
    circle = 0;
   }
   // //清除其余小圆圈类名
   // for (var i = 0; i < ol.children.length; i++) {
   // ol.children[i].className = '';
   // }
   // //留下当前小圆圈current类名
   // ol.children[circle].className = 'current';
   circleChange();
   }
  })
  //左侧按钮
  prev.addEventListener('click', function() {
  if (flag) {
   flag = false;
   //5.如果走到最后一张复制图片此时ul快速复原 left改为0(无缝滚动)
   if (num == 0) {
   num = ul.children.length - 1;
   ul.style.left = -num * focusWidth + 'px';
 
   }
   num--;
   animate(ul, -num * focusWidth, function() {
   flag = true;
   });
   //8.点击右侧按钮小圆圈跟随一起变化 声明一个变量控制小圆圈变化
   circle--;
   //如果 circle小于0小圆圈要改为第四个小圆圈
   if (circle < 0) {
   circle = ol.children.length - 1;
   }
   // 清除其余小圆圈类名
   // for (var i = 0; i < ol.children.length; i++) {
   // ol.children[i].className = '';
   // }
   // 留下当前小圆圈current类名
   // ol.children[circle].className = 'current';
   circleChange();
  }
  })
 
  function circleChange() {
  //清除其余小圆圈类名
  for (var i = 0; i < ol.children.length; i++) {
   ol.children[i].className = '';
  }
  //留下当前小圆圈current类名
  ol.children[circle].className = 'current';
  }
 
  //10.自动播放轮播图
  var timer = setInterval(function() {
  next.click();
  }, 2000)
 
 })
 </script>
</body>
 
</html>

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

Javascript 相关文章推荐
JS对URL字符串进行编码/解码分析
Oct 25 Javascript
JQuery 实现的页面滚动时浮动窗口控件
Jul 10 Javascript
JavaScript中的16进制字符(改进)
Nov 21 Javascript
jQuery操作Select选择的Text和Value(获取/设置/添加/删除)
Mar 06 Javascript
jQuery自定义事件的简单实现代码
Jan 27 Javascript
jquery自动填充勾选框即把勾选框打上true
Mar 24 Javascript
理解javascript中DOM事件
Dec 25 Javascript
浅谈jQuery 选择器和dom操作
Jun 07 Javascript
浅谈json取值(对象和数组)
Jun 24 Javascript
AngularJS ng-repeat指令及Ajax的应用实例分析
Jul 06 Javascript
JS实现随机点名器
Apr 12 Javascript
JS中锚点链接点击平滑滚动并自由调整到顶部位置
Feb 06 Javascript
JavaScript实现4位随机验证码的生成
Jan 28 #Javascript
JavaScript点击按钮生成4位随机验证码
Jan 28 #Javascript
Vue ​v-model相关知识总结
Jan 28 #Vue.js
Vue 数据响应式相关总结
Jan 28 #Vue.js
node使用async_hooks模块进行请求追踪
Jan 28 #Javascript
JavaScript如何实现防止重复的网络请求的示例
Jan 28 #Javascript
JavaScript实现跟随鼠标移动的盒子
Jan 28 #Javascript
You might like
PHP3 safe_mode 失效漏洞
2006/10/09 PHP
php HandlerSocket的使用
2011/05/02 PHP
php安全开发 添加随机字符串验证,防止伪造跨站请求
2013/02/14 PHP
PHP中使用xmlreader读取xml数据示例
2014/12/29 PHP
Prototype Object对象 学习
2009/07/12 Javascript
JavaScript Cookie 直接浏览网站分网址
2009/12/08 Javascript
javascript修改图片src的方法
2015/01/27 Javascript
AngularJS转换响应内容
2016/01/27 Javascript
js中string和number类型互转换技巧(分享)
2016/11/28 Javascript
深入理解AngularJS中的ng-bind-html指令
2017/03/27 Javascript
Bootstrap弹出框(Popover)被挤压的问题小结
2017/07/11 Javascript
vue.js语法及常用指令
2017/10/29 Javascript
Angular中支持SCSS的方法
2017/11/18 Javascript
详解webpack + react + react-router 如何实现懒加载
2017/11/20 Javascript
Vue中使用vee-validate表单验证的方法
2018/05/09 Javascript
详解Webpack + ES6 最新环境搭建与配置
2018/06/04 Javascript
解决Vue axios post请求,后台获取不到数据的问题方法
2018/08/11 Javascript
解决Python pandas plot输出图形中显示中文乱码问题
2018/12/12 Python
Python实现的矩阵转置与矩阵相乘运算示例
2019/03/26 Python
对PyQt5中树结构的实现方法详解
2019/06/17 Python
python3 tcp的粘包现象和解决办法解析
2019/12/09 Python
python实现梯度下降法
2020/03/24 Python
linux面试题参考答案(8)
2015/08/11 面试题
简述进程的启动、终止的方式以及如何进行进程的查看
2013/07/12 面试题
最新教师自我评价分享
2013/11/12 职场文书
kfc实习自我鉴定
2013/12/14 职场文书
机电专业个人求职信范文
2013/12/30 职场文书
小学教师办公室制度
2014/02/03 职场文书
教师自我反思材料
2014/02/14 职场文书
学生党员的自我评价范文
2014/03/01 职场文书
我的教育故事演讲稿
2014/05/04 职场文书
反邪教标语
2014/06/23 职场文书
年终晚会活动方案
2014/08/21 职场文书
放飞梦想演讲稿800字
2014/08/26 职场文书
奉献家乡演讲稿
2014/09/13 职场文书
安全伴我行主题班会
2015/08/13 职场文书