JavaScript实现PC端横向轮播图


Posted in Javascript onFebruary 07, 2020

本文实例为大家分享了JavaScript实现PC端横向轮播图的具体代码,供大家参考,具体内容如下

步骤:

第一步:先实现右侧按钮点击图片动起来;
1.每次点击图片走的距离;
2.起始位置已知,计算定时器每走一小步的距离;

第二步:判断点击按钮一次图片移动的距离,停止定时器;

第三步:左边按钮逻辑和右侧按钮几乎一致;
1.因此封装函数move(flag),函数传参是Boolean则是左右按钮方向

第四步:无缝轮播:html结构修改,在当前结构分别加第一张图和最后一张图;
1.判断图片位置,设置相应位置;

第五步:小圆点逻辑:排他思想;
1.关键在于小圆点变色,用最终位置计算小圆点下标,设置样式;

第六步:点击小圆点,图片切换和小圆点位置对应,move函数中传参数根据类型判断,boolean 是左右按钮,数值室小圆点下标相关;flag参数代表左右按钮和小圆点;

第七步:自动轮播:根据图片下标进行;

第八步:自动轮播和鼠标行为同步时:鼠标移入清楚自动轮播;鼠标移出自动轮播

第九步:鼠标移入后,点击按钮和小圆点有需要把自动轮播的小标值更新,否则没法同步;

html代码:

<div id="swiper">
 <ul class="list">
  <li><img src="img/9.jpg" alt=""></li>
  <!-- 最后一张 -->
  <li><img src="img/2.jpg" alt=""></li>
  <li><img src="img/3.jpg" alt=""></li>
  <li><img src="img/4.jpg" alt=""></li>
  <li><img src="img/6.jpg" alt=""></li>
  <li><img src="img/9.jpg" alt=""></li>
  <!-- 第一张 -->
  <li><img src="img/2.jpg" alt=""></li>
 </ul>
 <span class="btn-left"><</span>
 <span class="btn-right">></span>
 <ul class="points">
  <li class="current"></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

css代码:

<style type="text/css">
 * {
  margin: 0;
  padding: 0;
 }
 
 ul,
 li {
  list-style: none;
 }
 
 a {
  text-decoration: none;
 }
 
 img {
  display: block;
 }
 
 input {
  outline: none;
 }
 
 .clearFix:after {
  content: '';
  display: block;
  clear: both;
 }
 /*禁止系统滚动条*/
 
 html,
 body {
  height: 100%;
  overflow: hidden;
 }
 
 #swiper {
  position: relative;
  width: 1000px;
  height: 500px;
  background: green;
  margin: 50px auto 0;
  overflow: hidden;
 }
 
 #swiper .list {
  position: absolute;
  left: -1000px;
  top: 0;
  width: 7000px;
  overflow: hidden;
 }
 
 #swiper .list>li {
  float: left;
  width: 1000px;
  height: 500px;
 }
 
 #swiper .list>li img {
  width: 100%;
  height: 100%;
 }
 
 #swiper span {
  position: absolute;
  /* left: 0; */
  top: 40%;
  transform: translateY(-50%);
  width: 80px;
  height: 100px;
  background: rgba(0, 0, 0, 0.5);
  font-size: 50px;
  color: white;
  font-weight: bold;
  padding-top: 30px;
  text-align: center;
  opacity: 0;
  transition: opacity 1s;
  cursor: pointer;
 }
 
 #swiper:hover span {
  opacity: 1;
 }
 
 #swiper .btn-left {
  left: 0;
 }
 
 #swiper .btn-right {
  right: 0;
 }
 
 #swiper .points {
  position: absolute;
  left: 40%;
  transform: translateX(-50%);
  bottom: 20px;
  /* width: 300px; */
 }
 
 #swiper .points>li {
  width: 30px;
  height: 30px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  float: left;
  margin: 0 5px;
 }
 
 #swiper .points .current {
  background: red;
 }
</style>

javascript代码:

<script>
 window.onload = function() {
  // 获取变量
  var swiper = document.querySelector('#swiper');
  var list = document.querySelector('#swiper .list');
  var liNodes = document.querySelectorAll('#swiper .list>li');
  var btnNodes = document.querySelectorAll('#swiper span');
  // 切换一张需要的总时长
  var timeAll = 1000;
  // 每走一步需要的时长
  var timeStep = 20;
  var timer = null;
  // 小圆点
  var icons = document.querySelectorAll('#swiper>.points li');
  var isMove = false;
  var autoTimer = null;

  // 鼠标进入banner
  swiper.onmouseenter = function() {
  // 清除定时器
  clearInterval(autoTimer);
  }

  // 鼠标离开banner
  swiper.onmouseleave = function() {
  // 打开自动轮播定时器
  autoRun();
  }

  // 点击按钮切换图片
  // 右按钮
  btnNodes[1].onclick = function() {
  // 图片且切换函数
  move(true);
  }

  // 左按钮
  btnNodes[0].onclick = function() {
  // 图片切换函数
  move(false);
  }

  // 图片切换函数
  function move(flag) {
  // 保证定时器只开一个,不会堆砌
  if (isMove) {
   return;
  }
  isMove = true;


  // 区分flag参数,boolean是左右图片切换
  if (typeof flag == 'boolean') {
   if (flag) {
   var elementDistance = -1000;
   } else {
   var elementDistance = 1000;
   }
  } else {
   var elementDistance = flag - list.offsetLeft;
  }

  // 每次点击后,ul所走的距离
  var elementLast = list.offsetLeft + elementDistance;
  // 每走一小步的距离
  var step = elementDistance / (timeAll / timeStep);

  timer = setInterval(function() {
   var left = list.offsetLeft + step;
   if (left == elementLast) {
   // 走的的距离等于最终的位置
   clearInterval(timer);
   if (left == -6000) {
    left = -1000;
   } else if (left == 0) {
    left = -5000;
   }
   isMove = false;
   }
   // 设置样式
   list.style.left = left + 'px';
  }, timeStep);

  // 小圆点切换逻辑
  for (var i = 0; i < icons.length; i++) {
   icons[i].className = '';
  }

  // 小圆点切换
  var index = elementLast / -1000 - 1;
  if (index > 4) {
   index = 0;
  } else if (index < 0) {
   index = 4;
  }
  icons[index].className = 'current';
  console.log(icons);
  //让自动轮播和点击后下标保持统一
  autoIndex = index + 1;
  }

  // 点击小圆点逻辑
  for (var i = 0; i < icons.length; i++) {
  icons[i].index = i;
  icons[i].onclick = function() {
   // 拿小圆点下标,求显示图片的下标,再求显示图片位置
   move((this.index + 1) * -1000);
  }
  }

  // 自动轮播逻辑
  var autoIndex = 1;
  autoRun();

  function autoRun() {
  autoTimer = setInterval(function() {
   autoIndex++;
   move(autoIndex * -1000);
   if (autoIndex == 6) {
   autoIndex = 1;
   }
  }, 2000);
  }
 }
</script>

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

Javascript 相关文章推荐
JQery 渐变图片导航效果代码 漂亮
Jan 01 Javascript
基于jquery的inputlimiter 实现字数限制功能
May 30 Javascript
JS+ACTIVEX实现网页选择本地目录路径对话框
Mar 18 Javascript
node.js中的events.emitter.listeners方法使用说明
Dec 10 Javascript
JS时间特效最常用的三款
Aug 19 Javascript
设置jQueryUI DatePicker默认语言为中文
Jun 04 Javascript
利用JavaScript实现拖拽改变元素大小
Dec 14 Javascript
bootstrap中添加额外的图标实例代码
Feb 15 Javascript
JavaScript中的this陷阱的最全收集并整理(没有之一)
Feb 21 Javascript
解决bootstrap中下拉菜单点击后不关闭的问题
Aug 10 Javascript
vue2中,根据list的id进入对应的详情页并修改title方法
Aug 24 Javascript
js刷新页面location.reload()用法详解
Dec 09 Javascript
vue更改数组中的值实例代码详解
Feb 07 #Javascript
Vue 一键清空表单的实现方法
Feb 07 #Javascript
Vue中qs插件的使用详解
Feb 07 #Javascript
npm qs模块使用详解
Feb 07 #Javascript
Js参数RSA加密传输之jsencrypt.js的使用
Feb 07 #Javascript
Vue使用JSEncrypt实现rsa加密及挂载方法
Feb 07 #Javascript
jQuery实现获取多选框的值示例
Feb 07 #jQuery
You might like
PHP 读取Postgresql中的数组
2013/04/14 PHP
php中ob函数缓冲机制深入理解
2015/08/03 PHP
Jquery ajax不能解析json对象,报Invalid JSON错误的原因和解决方法
2010/03/27 Javascript
js函数返回多个返回值的示例代码
2013/11/05 Javascript
js怎么覆盖原有方法实现重写
2014/09/04 Javascript
javascript实现的图片切割多块效果实例
2015/05/07 Javascript
JS+CSS简单树形菜单实现方法
2015/09/12 Javascript
JavaScript对象数组的排序处理方法
2015/10/21 Javascript
多种JQuery循环滚动文字图片效果代码
2020/06/23 Javascript
jQuery实现下拉菜单(内容为时间)的实时更新及图表的随动更新的方法
2016/07/07 Javascript
AngularJS表格添加序号的方法
2017/03/03 Javascript
jQuery使用正则验证15/18身份证的方法示例
2017/04/27 jQuery
JavaScript面向对象精要(上部)
2017/09/12 Javascript
JS实现DOM删除节点操作示例
2018/04/04 Javascript
vue中如何实现pdf文件预览的方法
2018/07/12 Javascript
vue中设置height:100%无效的问题及解决方法
2018/07/27 Javascript
element-ui中的select下拉列表设置默认值方法
2018/08/24 Javascript
一文读懂vue动态属性数据绑定(v-bind指令)
2020/07/20 Javascript
Python学习之Django的管理界面代码示例
2018/02/10 Python
DataFrame 将某列数据转为数组的方法
2018/04/13 Python
对Python中gensim库word2vec的使用详解
2018/05/08 Python
python中join()方法介绍
2018/10/11 Python
详解python3 + Scrapy爬虫学习之创建项目
2019/04/12 Python
python 字典操作提取key,value的方法
2019/06/26 Python
python 发送json数据操作实例分析
2019/10/15 Python
如何在mac版pycharm选择python版本
2020/07/21 Python
Python 保存加载mat格式文件的示例代码
2020/08/04 Python
实例教程 HTML5 Canvas 超炫酷烟花绽放动画实现代码
2014/11/05 HTML / CSS
计算机专业个人求职信范例
2013/09/23 职场文书
毕业生自荐书
2014/02/02 职场文书
大学生演讲稿
2014/04/25 职场文书
幼儿园安全生产月活动总结
2014/07/05 职场文书
2014年维修电工工作总结
2014/11/20 职场文书
小学优秀教师事迹材料
2014/12/16 职场文书
如何写通讯稿
2015/07/22 职场文书
Python 把两层列表展开平铺成一层(5种实现方式)
2021/04/07 Python