原生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写的操作系统
Apr 23 Javascript
超酷的网页音乐播放器DewPlayer使用方法
Dec 18 Javascript
关于js注册事件的常用方法
Apr 03 Javascript
js与jquery获取父级元素,子级元素,兄弟元素的实现方法
Jan 09 Javascript
javascript实现简单的贪吃蛇游戏
Mar 31 Javascript
AngularJs directive详解及示例代码
Sep 01 Javascript
Angular2 组件通信的实例代码
Jun 23 Javascript
Bootstrap Tooltip显示换行和左对齐的解决方案
Oct 11 Javascript
vue使用axios跨域请求数据问题详解
Oct 18 Javascript
详解一个基于react+webpack的多页面应用配置
Jan 21 Javascript
vue spa应用中的路由缓存问题与解决方案
May 31 Javascript
Js实现粘贴上传图片的原理及示例
Dec 09 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
rrmdir php中递归删除目录及目录下的文件
2011/05/15 PHP
大家在抢红包,程序员在研究红包算法
2015/08/31 PHP
php 中self,this的区别和操作方法实例分析
2019/11/04 PHP
js中的setInterval和setTimeout使用实例
2014/05/09 Javascript
jquery修改网页背景颜色通过css方法实现
2014/06/06 Javascript
js正则表达式匹配数字字母下划线等
2015/04/14 Javascript
jQuery插件datalist实现很好看的input下拉列表
2015/07/14 Javascript
基于OL2实现百度地图ABCD marker的效果
2015/10/01 Javascript
jQuery获取Table某列的值(推荐)
2017/03/03 Javascript
微信小程序 自动登陆PHP源码实例(源码下载)
2017/05/08 Javascript
js上传图片预览的实现方法
2017/05/09 Javascript
AngularJS+bootstrap实现动态选择商品功能示例
2017/05/17 Javascript
详解vue.js的事件处理器v-on:click
2017/06/27 Javascript
在vue项目创建的后初始化首次使用stylus安装方法分享
2018/01/25 Javascript
[47:48]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第三局
2016/02/28 DOTA
Python画柱状统计图操作示例【基于matplotlib库】
2018/07/04 Python
python 分离文件名和路径以及分离文件名和后缀的方法
2018/10/21 Python
python笔记之mean()函数实现求取均值的功能代码
2019/07/05 Python
TensorFlow实现指数衰减学习率的方法
2020/02/05 Python
python实现按键精灵找色点击功能教程,使用pywin32和Pillow库
2020/06/04 Python
python对一个数向上取整的实例方法
2020/06/18 Python
Python程序慢的重要原因
2020/09/04 Python
python中@contextmanager实例用法
2021/02/07 Python
python实现计算图形面积
2021/02/22 Python
Rockport乐步美国官网:风靡美国的白宫鞋
2016/11/24 全球购物
Spartoo葡萄牙鞋类网站:线上销售鞋履与时尚配饰
2017/01/11 全球购物
巴西男士胡须和头发护理产品商店:Beard
2017/11/13 全球购物
美国在线自行车商店:Jenson USA
2018/05/22 全球购物
你的创业计划书怎样才能打动风投
2014/02/06 职场文书
无偿献血倡议书
2014/04/14 职场文书
《风娃娃》教学反思
2014/04/19 职场文书
我是一名护士演讲稿
2014/08/28 职场文书
服务行业演讲稿
2014/09/02 职场文书
未婚证明范本
2015/06/15 职场文书
Nginx中break与last的区别详析
2021/03/31 Servers
解决Maven项目中 Invalid bound statement 无效的绑定问题
2021/06/15 Java/Android