原生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 相关文章推荐
javascript预览上传图片发现的问题的解决方法
Nov 25 Javascript
node.js中的fs.fchownSync方法使用说明
Dec 16 Javascript
JS实现文字放大效果的方法
Mar 03 Javascript
javascript日期处理函数,性能优化批处理
Sep 06 Javascript
理解JS事件循环
Jan 07 Javascript
JavaScript实现简单的日历效果
Sep 25 Javascript
discuz表情的JS提取方法分析
Mar 22 Javascript
Vue 2.0的数据依赖实现原理代码简析
Jul 10 Javascript
Vue-router 类似Vuex实现组件化开发的示例
Sep 15 Javascript
Vue.js 动态为img的src赋值方法
Mar 14 Javascript
CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】
Jun 14 Javascript
利用JS代码自动删除稿件的普通弹幕功能
Sep 20 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实现MVC开发得最简单的方法――模型
2007/04/10 PHP
PHP使用pdo实现事务处理操作示例
2018/09/05 PHP
jquery 实现的全选和反选
2009/04/15 Javascript
无缝滚动改进版支持上下左右滚动(封装成函数)
2012/12/04 Javascript
用jquery实现点击栏目背景色改变
2012/12/10 Javascript
javascript 获取网页标题代码实例
2014/01/22 Javascript
node.js中的定时器nextTick()和setImmediate()区别分析
2014/11/26 Javascript
Jquery简单分页实现方法
2015/07/24 Javascript
基于jquery实现人物头像跟随鼠标转动
2015/08/23 Javascript
整理Javascript基础入门学习笔记
2015/11/29 Javascript
javascript-解决mongoose数据查询的异步操作
2016/12/22 Javascript
基于JavaScript实现淘宝商品广告效果
2017/08/10 Javascript
vue中SPA单页面应用程序详解
2017/11/07 Javascript
layui清除radio的选中状态实例
2019/11/14 Javascript
js实现橱窗展示效果
2020/01/11 Javascript
node创建Vue项目步骤详解
2020/03/06 Javascript
[02:35]DOTA2英雄基础教程 末日使者
2013/12/04 DOTA
深入源码解析Python中的对象与类型
2015/12/11 Python
解决.ui文件生成的.py文件运行不出现界面的方法
2019/06/19 Python
Python利用全连接神经网络求解MNIST问题详解
2020/01/14 Python
Python中断多重循环的几种方式详解
2020/02/10 Python
python简单实现9宫格图片实例
2020/09/03 Python
canvas实现俄罗斯方块的方法示例
2018/12/13 HTML / CSS
西班牙著名的珠宝首饰品牌:P D PAOLA
2018/09/15 全球购物
Fnac西班牙官网:法国文化和电子产品零售商
2021/03/14 全球购物
排序都有哪几种方法?请列举。用JAVA实现一个快速排序
2014/02/16 面试题
大学生活学习的自我评价
2013/12/03 职场文书
两年的个人工作自我评价
2014/01/10 职场文书
不打扫卫生检讨书
2014/02/12 职场文书
促销活动总结
2014/04/28 职场文书
创业培训计划书
2014/05/03 职场文书
教师优秀党员事迹材料
2014/08/14 职场文书
小学生毕业评语
2014/12/26 职场文书
2015年秋学期教研工作总结
2015/10/14 职场文书
85句关于理想的名言警句大全
2019/08/22 职场文书
python图像处理基本操作总结(PIL库、Matplotlib及Numpy)
2021/06/08 Python