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 相关文章推荐
CSS和JS标签style属性对照表(方便js开发的朋友)
Nov 11 Javascript
基于javascript实现listbox左右移动
Jan 29 Javascript
AngularJS基础 ng-value 指令简单示例
Aug 03 Javascript
JS实现获取当前URL和来源URL的方法
Aug 24 Javascript
bootstrap laydate日期组件使用详解
Jan 04 Javascript
AngularJS 控制器 controller的详解
Oct 17 Javascript
微信小程序上传图片到php服务器的方法
May 23 Javascript
Angular8 Http拦截器简单使用教程
Aug 20 Javascript
如何正确理解vue中的key详解
Nov 02 Javascript
微信小程序scroll-view的滚动条设置实现
Mar 02 Javascript
JavaScript 如何在浏览器中使用摄像头
Dec 02 Javascript
Javascript节流函数throttle和防抖函数debounce
Dec 03 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获取指定时间段之间的 年,月,天,时,分,秒
2016/06/05 PHP
php版微信公众平台实现预约提交后发送email的方法
2016/09/26 PHP
简述php环境搭建与配置
2016/12/05 PHP
基于php编程规范(详解)
2017/08/17 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
2017/11/14 PHP
PHP5.0~5.6 各版本兼容性cURL文件上传功能实例分析
2018/05/11 PHP
Bookmarklet实现启动jQuery(模仿 云输入法)
2010/09/15 Javascript
在JavaScript中监听IME键盘输入事件
2011/05/29 Javascript
suggestion开发小结以及对键盘事件的总结(针对中文输入法状态)
2011/12/20 Javascript
封装了一个支持匿名函数的Javascript事件监听器
2014/06/05 Javascript
浅谈如何实现easyui的datebox格式化
2016/06/12 Javascript
JS实现浏览器打印、打印预览示例
2017/02/28 Javascript
浅谈vue中改elementUI默认样式引发的static与assets的区别
2018/02/03 Javascript
深入浅析Vue.js计算属性和侦听器
2018/05/05 Javascript
nuxt.js 缓存实践
2018/06/25 Javascript
js实现图片放大并跟随鼠标移动特效
2019/01/18 Javascript
在微信小程序中使用图表的方法示例
2019/04/25 Javascript
微信小程序上传多图到服务器并获取返回的路径
2019/05/05 Javascript
vue实现tab栏点击高亮效果
2020/08/19 Javascript
JavaScript 实现下雪特效的示例代码
2020/09/09 Javascript
天翼开放平台免费短信验证码接口使用实例
2013/12/18 Python
Python检测QQ在线状态的方法
2015/05/09 Python
python使用paramiko模块通过ssh2协议对交换机进行配置的方法
2019/07/25 Python
Python 保存加载mat格式文件的示例代码
2020/08/04 Python
python如何实现图片压缩
2020/09/11 Python
Python之京东商品秒杀的实现示例
2021/01/06 Python
Currentbody澳大利亚:美容仪专家
2019/11/11 全球购物
加拿大鞋网:Globo Shoes
2019/12/26 全球购物
毕业生医学检验求职信
2013/10/16 职场文书
小学教育毕业生自荐信
2013/11/18 职场文书
学生思想表现的评语
2014/01/30 职场文书
《小石潭记》教学反思
2014/02/13 职场文书
四风自我剖析材料思想汇报
2014/10/01 职场文书
安全保证书
2015/01/16 职场文书
Nginx虚拟主机的搭建的实现步骤
2022/01/18 Servers
基于Python实现射击小游戏的制作
2022/04/06 Python