JavaScript实现轮播图效果


Posted in Javascript onOctober 30, 2020

要求:

  1. 鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮
  2. 点击右侧按钮一次,图片往左播放一张,以此类推,左侧按钮同理
  3. 图片播放的同时,下面小圆圈模块跟随一起变化
  4. 点击小圆圈,可以播放相应图片
  5. 鼠标不经过轮播图,轮播图也会自动播放图片
  6. 鼠标经过,轮播图模块,自动播放停止

代码实现:

autoPlay.html(复制并保存为html文件,打开即可见效果):

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://blog-static.cnblogs.com/files/jacklzx/autoPlay.css" rel="external nofollow" >
  <script src="https://blog-static.cnblogs.com/files/jacklzx/animate.js"></script>
  <script src="https://blog-static.cnblogs.com/files/jacklzx/autoPlay.js"></script>
</head>

<body>
  <div class="focus">
    <!-- 左侧按钮 -->
    <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="arrow-l"><</a>
    <!-- 右侧按钮 -->
    <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="arrow-r">></a>
    <!-- 滚动区域 -->
    <ul>
      <li>
        <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="https://s1.ax1x.com/2020/10/12/0W1wlt.jpg" alt=""></a>
      </li>
      <li>
        <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="https://s1.ax1x.com/2020/10/12/0W3nHS.jpg" alt=""></a>
      </li>
      <li>
        <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="https://s1.ax1x.com/2020/10/12/0Wtrmq.jpg" alt=""></a>
      </li>
      <li>
        <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="https://s1.ax1x.com/2020/10/12/0W1NYd.jpg" alt=""></a>
      </li>
    </ul>
    <!-- 小圆圈 -->
    <ol class="circle">
    </ol>
  </div>
</body>

</html>

autoPlay.css:

li {
  list-style: none;
}

a {
  text-decoration: none;
}

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #00e1ff;
}

.focus {
  overflow: hidden;
  position: relative;
  width: 721px;
  height: 455px;
  margin: 100px auto;
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.6);
  border-radius: 40px;
}

.focus ul {
  position: absolute;
  top: 0;
  left: 0;
  width: 600%;
}

.focus ul li {
  float: left;
}

.arrow-l {
  display: none;
  position: absolute;
  top: 50%;
  left: -12px;
  margin-top: -20px;
  width: 40px;
  height: 40px;
  background: rgba(0, 0, 0, .3);
  text-align: center;
  line-height: 40px;
  color: #fff;
  font-size: 18px;
  border-radius: 0 50% 50% 0;
  z-index: 999;
}

.arrow-r {
  display: none;
  position: absolute;
  top: 50%;
  right: -12px;
  margin-top: -20px;
  width: 40px;
  height: 40px;
  background: rgba(0, 0, 0, .3);
  text-align: center;
  line-height: 40px;
  color: #fff;
  font-size: 18px;
  border-radius: 50% 0 0 50%;
  z-index: 999;
}

.circle {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}

.circle li {
  float: left;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(255, 255, 255, .5);
  margin: 0 4px;
  border-radius: 50%;
  cursor: pointer;
}

.current {
  background-color: #fff;
  box-shadow: 0 0 10px #fff;
}

autoPlay.js:

window.addEventListener('load', function() {
  // 获取元素
  var arrow_l = document.querySelector('.arrow-l');
  var arrow_r = document.querySelector('.arrow-r');
  var focus = document.querySelector('.focus');
  var focusWidth = focus.offsetWidth;
  // 自定义动画函数animate的参数,表示动画间隔
  var step = 5;
  // 鼠标经过focus 就显示左右按钮,停止计时器
  focus.addEventListener('mouseenter', function() {
    arrow_l.style.display = 'block';
    arrow_r.style.display = 'block';
    clearInterval(timer);
    timer = null; // 清空计时器
  });
  // 鼠标离开focus 就隐藏左右按钮,调用定时器
  focus.addEventListener('mouseleave', function() {
    arrow_l.style.display = 'none';
    arrow_r.style.display = 'none';
    timer = setInterval(function() {
      // 手动调用点击事件
      arrow_r.click();
    }, 2000);
  });

  var ul = focus.querySelector('ul');
  var ol = focus.querySelector('.circle');
  for (var i = 0; i < ul.children.length; i++) {
    // 创建 li
    var li = document.createElement('li');
    // 设置自定义属性,记录小圆圈索引号
    li.setAttribute('index', i);
    // li插入ol
    ol.appendChild(li);
    // 小圈圈排他思想 生成圈圈同时 直接绑定事件
    li.addEventListener('click', function() {
      for (var i = 0; i < ol.children.length; i++) {
        ol.children[i].className = '';
      }
      this.className = 'current';
      // 点击小圈圈,移动图片,移动的是ul
      // 点击li,拿到当前的索引号
      var index = this.getAttribute('index');
      // 当点击了li之后,就要把index给num,实现同步
      num = index;
      // 当点击了li之后,就要把index给circle,实现同步
      circle = index;
      animate(ul, -index * focusWidth, step);
    });
  }
  // ol里第一个li的类名设置为current
  ol.children[0].className = 'current';
  var num = 0;
  // circle控制小圆圈的播放
  var circle = 0;
  // 克隆第一章图片li,放到ul最后面
  // 要在生成小圆圈之后克隆
  var first = ul.children[0].cloneNode(true);
  ul.appendChild(first);
  // 点击右侧按钮,图片滚动
  arrow_r.addEventListener('click', function() {
    // 如果到了最后一张图片,ul要快速复原:left改为0
    if (num == ul.children.length - 1) {
      ul.style.left = 0;
      num = 0;
    }
    num++;
    animate(ul, -num * focusWidth, step);
    // circle控制小圆圈的播放
    circle++;
    circle = circle == ol.children.length ? 0 : circle;
    circleChange();
  });

  // 点击左侧按钮,图片滚动
  arrow_l.addEventListener('click', function() {
    if (num == 0) {
      num = ul.children.length - 1;
      ul.style.left = -num * focusWidth + 'px';
    }
    num--;
    animate(ul, -num * focusWidth, step);
    // circle控制小圆圈的播放
    circle--;
    circle = circle < 0 ? (ol.children.length - 1) : circle;
    circleChange();
  });

  // 小圈圈改变样式
  function circleChange() {
    // 排他其他
    for (var i = 0; i < ol.children.length; i++) {
      ol.children[i].className = '';
    }
    // 留下自己
    ol.children[circle].className = 'current';
  }

  // 自动播放功能
  var timer = setInterval(function() {
    // 手动调用点击事件
    arrow_r.click();
  }, 2000);
});

animate.js:

function animate(obj, target, time, callback) {
  // 先清除以前的定时器,只保留当前的一个定时器执行
  clearInterval(obj.timer);
  obj.timer = setInterval(function() {
    // 步长值写到定时器的里面,并设置为整数
    var step = (target - obj.offsetLeft) / 10;
    step = step > 0 ? Math.ceil(step) : Math.floor(step);
    if (obj.offsetLeft == target) {
      clearInterval(obj.timer);
      // 回调函数写到定时器结束里面
      callback && callback();
    }
    obj.style.left = obj.offsetLeft + step + 'px';
  }, time);
}

JavaScript实现轮播图效果

以上就是JavaScript实现轮播图效果的详细内容,更多关于JavaScript 轮播图的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
JavaScript打印iframe内容示例代码
Aug 20 Javascript
jquery选择器之层级过滤选择器详解
Jan 27 Javascript
jQuery中map()方法用法实例
Jan 06 Javascript
JavaScript实现图片DIV竖向滑动的方法
Apr 25 Javascript
JavaScript ParseFloat()方法
Dec 18 Javascript
jQuery实现点击按钮文字变成input框点击保存变成文字
May 09 Javascript
Node.js中npm常用命令大全
Jun 09 Javascript
jQuery解析与处理服务器端返回xml格式数据的方法详解
Jul 04 Javascript
Angular中ng-options下拉数据默认值的设定方法
Jun 21 Javascript
JS函数动态传递参数的方法分析【基于arguments对象】
Jun 05 Javascript
Openlayers实现地图的基本操作
Sep 28 Javascript
微信小程序对图片进行canvas压缩的方法示例详解
Nov 12 Javascript
vue组件添加事件@click.native操作
Oct 30 #Javascript
解决removeEventListener 无法清除监听的问题
Oct 30 #Javascript
详解 javascript对象创建模式
Oct 30 #Javascript
ES6中的Javascript解构的实现
Oct 30 #Javascript
vue video和vue-video-player实现视频铺满教程
Oct 30 #Javascript
Echarts.js无法引入问题解决方案
Oct 30 #Javascript
解决Vue keep-alive 调用 $destory() 页面不再被缓存的情况
Oct 30 #Javascript
You might like
php mssql 时间格式问题
2009/01/13 PHP
PHP读取文件内容后清空文件示例代码
2014/03/18 PHP
php仿微信红包分配算法的实现方法
2016/05/13 PHP
PHP+Redis 消息队列 实现高并发下注册人数统计的实例
2018/01/29 PHP
php微信公众号开发之关键词回复
2018/10/20 PHP
javascript代码加载优化方法
2011/01/30 Javascript
分享20款好玩的jQuery游戏
2011/04/17 Javascript
js 固定悬浮效果实现思路代码
2013/08/02 Javascript
jQuery选择器源码解读(二):select方法
2015/03/31 Javascript
javascript实现获取浏览器版本、浏览器类型
2015/12/02 Javascript
nodejs加密Crypto的实例代码
2016/07/07 NodeJs
JS制作类似选项卡切换的年历
2016/12/03 Javascript
javascript添加前置0(补零)的几种方法
2017/01/05 Javascript
js自定义瀑布流布局插件
2017/05/16 Javascript
react native与webview通信的示例代码
2017/09/25 Javascript
微信小程序如何获取openid及用户信息
2018/01/26 Javascript
如何在vue里添加好看的lottie动画
2018/08/02 Javascript
在vue中使用SockJS实现webSocket通信的过程
2018/08/29 Javascript
详解多页应用 Webpack4 配置优化与踩坑记录
2018/10/16 Javascript
微信小程序页面间传值与页面取值操作实例分析
2019/04/30 Javascript
微信小程序下拉框搜索功能的实现方法
2019/07/31 Javascript
JavaScript判断浏览器版本的方法
2019/11/03 Javascript
vue cli4.0项目引入typescript的方法
2020/07/17 Javascript
原生jQuery实现只显示年份下拉框
2020/12/24 jQuery
原生js实现自定义滚动条
2021/01/20 Javascript
[01:20]DOTA2更新全新英雄 天涯墨客现已加入游戏
2018/08/25 DOTA
使用python存储网页上的图片实例
2018/05/22 Python
python+opencv像素的加减和加权操作的实现
2019/07/14 Python
python修改linux中文件(文件夹)的权限属性操作
2020/03/05 Python
numba提升python运行速度的实例方法
2021/01/25 Python
院药学专业个人求职信
2013/09/21 职场文书
管理部部长岗位职责
2013/12/05 职场文书
社区安全生产月活动总结
2014/07/05 职场文书
班子个人四风问题整改措施
2014/10/04 职场文书
2015年售后服务工作总结
2015/04/25 职场文书
Python实现视频自动打码的示例代码
2022/04/08 Python