原生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 相关文章推荐
JQuery扩展插件Validate—6 radio、checkbox、select的验证
Sep 05 Javascript
jquery的checkbox,radio,select等方法小结
Aug 30 Javascript
jQuery实现的表格展开伸缩效果实例
Sep 07 Javascript
详解Vue中添加过渡效果
Mar 20 Javascript
Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )
Mar 31 Javascript
Vue.js 单页面多路由区域操作的实例详解
Jul 17 Javascript
zTree获取当前节点的下一级子节点数实例
Sep 05 Javascript
解决使用vue.js路由后失效的问题
Mar 17 Javascript
layer弹出层 iframe层去掉滚动条的实例代码
Aug 17 Javascript
arctext.js实现文字平滑弯曲弧形效果的插件
May 13 Javascript
微信小程序实用代码段(收藏版)
Dec 17 Javascript
Vue的Eslint配置文件eslintrc.js说明与规则介绍
Feb 03 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
提升PHP执行速度全攻略(下)
2006/10/09 PHP
PHP XML备份Mysql数据库
2009/05/27 PHP
php简单开启gzip压缩方法(zlib.output_compression)
2013/04/13 PHP
PHP获取文件夹大小函数用法实例
2015/07/01 PHP
JavaScript Archive Network 集合
2007/05/12 Javascript
js触发onchange事件的方法说明
2014/03/08 Javascript
jQGrid动态填充select下拉框的选项值(动态填充)
2016/11/28 Javascript
输入框点击时边框变色效果的实现方法
2016/12/26 Javascript
深入理解JavaScript创建对象的多种方式以及优缺点
2017/06/01 Javascript
javascript实现延时显示提示框效果
2017/06/01 Javascript
详解react-native-fs插件的使用以及遇到的坑
2017/09/12 Javascript
C#实现将一个字符转换为整数
2017/12/12 Javascript
对vue2.0中.vue文件页面跳转之.$router.push的用法详解
2018/08/24 Javascript
vue基础之模板和过滤器用法实例分析
2019/03/12 Javascript
Vue3 中的数据侦测的实现
2019/10/09 Javascript
[01:29]2014DOTA2展望TI 剑指西雅图DK战队专访
2014/06/30 DOTA
PyCharm代码格式调整方法
2018/05/23 Python
程序员写Python时的5个坏习惯,你有几条?
2018/11/26 Python
Python生成MD5值的两种方法实例分析
2019/04/26 Python
如何解决安装python3.6.1失败
2020/07/01 Python
python实现文件+参数发送request的实例代码
2021/01/05 Python
Python机器学习工具scikit-learn的使用笔记
2021/01/28 Python
CSS3 media queries + jQuery实现响应式导航
2016/09/30 HTML / CSS
绝对令人的惊叹的CSS3折叠效果(3D效果)整理
2012/12/30 HTML / CSS
html5 跨文档消息传输示例探讨
2013/04/01 HTML / CSS
HTML5事件方法全部汇总
2016/05/12 HTML / CSS
关于iframe跨域使用postMessage的实现
2019/10/29 HTML / CSS
全球知名旅游社区法国站点:TripAdvisor法国
2016/08/03 全球购物
英国知名的护肤彩妆与时尚配饰大型综合零售电商:Unineed
2016/11/21 全球购物
精致的手工皮鞋:Shoe Embassy
2019/11/08 全球购物
全球最大的瓷器、水晶和银器零售商:Replacements
2020/06/15 全球购物
正宗的澳大利亚Ugg靴子零售商:UGG Express
2020/04/19 全球购物
学生爱国演讲稿
2014/01/14 职场文书
工厂采购员岗位职责
2015/04/07 职场文书
2016秋季运动会前导词
2015/11/25 职场文书
详解php中流行的rpc框架
2021/05/29 PHP