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 相关文章推荐
js 通用javascript函数库整理
Aug 14 Javascript
jQuery时间插件jquery.clock.js用法实例(5个示例)
Jan 14 Javascript
jQuery Validation Plugin验证插件手动验证
Jan 26 Javascript
javascript url几种编码方式详解
Jun 06 Javascript
浅谈JS的基础类型与引用类型
Sep 13 Javascript
webix+springmvc session超时跳转登录页面
Oct 30 Javascript
关于在vue-cli中使用微信自动登录和分享的实例
Jun 22 Javascript
如何使用JS在HTML中自定义字符串格式化
Jul 20 Javascript
js实现带进度条提示的多视频上传功能
Dec 13 Javascript
细说webpack源码之compile流程-rules参数处理技巧(2)
Dec 26 Javascript
JS限制输入框输入的实现代码
Jul 02 Javascript
使用Vue.set()方法实现响应式修改数组数据步骤
Nov 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
mysql5写入和读出乱码解决
2006/11/25 PHP
PHP正则提取不包含指定网址的图片地址的例子
2014/04/21 PHP
PHP微框架Dispatch简介
2014/06/12 PHP
php基于双向循环队列实现历史记录的前进后退等功能
2015/08/08 PHP
PHP的Yii框架中使用数据库的配置和SQL操作实例教程
2016/03/17 PHP
Javascript 文件夹选择框的两种解决方案
2009/07/01 Javascript
超轻量级的基于jquery的三级展开列表
2011/04/26 Javascript
jQuery图片的展开和收缩实现代码
2013/04/16 Javascript
全面理解面向对象的 JavaScript(来自ibm)
2013/11/10 Javascript
JavaScript onkeypress事件入门实例(按下或按住一个键盘按键)
2014/10/17 Javascript
JavaScript生成验证码并实现验证功能
2016/09/24 Javascript
详解PHP中pathinfo()函数导致的安全问题
2017/01/05 Javascript
vue-cli之router基本使用方法详解
2017/10/17 Javascript
JS实现的透明度渐变动画效果示例
2018/04/28 Javascript
vue中@change兼容问题详解
2019/10/25 Javascript
JavaScript链式调用原理与实现方法详解
2020/05/16 Javascript
python列表生成式与列表生成器的使用
2018/02/23 Python
python实现列表中由数值查到索引的方法
2018/06/27 Python
pytorch中tensor的合并与截取方法
2018/07/26 Python
python 通过 socket 发送文件的实例代码
2018/08/14 Python
Python django使用多进程连接mysql错误的解决方法
2018/10/08 Python
Pycharm配置远程调试的方法步骤
2018/12/17 Python
Flask框架实现的前端RSA加密与后端Python解密功能详解
2019/08/13 Python
利用Python产生加密表和解密表的实现方法
2019/10/15 Python
python分别打包出32位和64位应用程序
2020/02/18 Python
pymysql 插入数据 转义处理方式
2020/03/02 Python
python实现飞机大战项目
2020/03/11 Python
Python多线程正确用法实例解析
2020/05/30 Python
Myprotein丹麦官网:欧洲第一运动营养品牌
2019/04/15 全球购物
俄罗斯最大的在线珠宝大卖场:Nebo
2019/12/08 全球购物
师范毕业生自荐信
2013/10/17 职场文书
公司节能减排倡议书
2014/05/14 职场文书
莫言诺贝尔获奖演讲稿
2014/05/21 职场文书
C3 线性化算法与 MRO之Python中的多继承
2021/10/05 Python
Go语言实现一个简单的并发聊天室的项目实战
2022/03/18 Golang
python游戏开发之pygame实现接球小游戏
2022/04/22 Python