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 相关文章推荐
js 与或运算符 || &amp;&amp; 妙用
Dec 09 Javascript
使用jQuery.fn自定义jQuery翻页插件
Jan 20 Javascript
在Linux上用forever实现Node.js项目自启动
Jul 09 Javascript
javascript 10进制和62进制的相互转换
Jul 31 Javascript
JavaScript中Number对象的toFixed() 方法详解
Sep 02 Javascript
JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)
Dec 14 Javascript
基于vue打包后字体和图片资源失效问题的解决方法
Mar 06 Javascript
Vue源码解读之Component组件注册的实现
Aug 24 Javascript
JS document内容及样式操作完整示例
Jan 14 Javascript
js实现手表表盘时钟与圆周运动
Sep 18 Javascript
微信小程序使用前置摄像头拍照
Oct 22 Javascript
如何用JavaScript实现一个数组惰性求值库
May 05 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可逆加密/解密函数分享
2012/09/25 PHP
php开发时容易忘记的一些技术细节
2016/02/03 PHP
php实现文件上传及头像预览功能
2017/01/15 PHP
Web跨浏览器进程通信(Web跨域)
2013/04/17 Javascript
点击进行复制的JS代码实例
2013/08/23 Javascript
JavaScript中的函数重载深入理解
2014/08/04 Javascript
jQuery EasyUI提交表单验证
2016/07/19 Javascript
JavaScript新增样式规则(推荐)
2016/07/19 Javascript
JavaScript之underscore_动力节点Java学院整理
2017/07/03 Javascript
关于axios不能使用Vue.use()浅析
2018/01/12 Javascript
element 结合vue 在表单验证时有值却提示错误的解决办法
2018/01/22 Javascript
vue中使用iview自定义验证关键词输入框问题及解决方法
2018/03/26 Javascript
基于JS实现前端压缩上传图片的实例代码
2019/05/14 Javascript
如何实现echarts markline标签名显示自己想要的
2020/07/20 Javascript
angular共享依赖的解决方案分享
2020/10/15 Javascript
Python模拟登录验证码(代码简单)
2016/02/06 Python
Python中的异常处理相关语句基础学习笔记
2016/07/11 Python
Python字典实现简单的三级菜单(实例讲解)
2017/07/31 Python
Python使用Tkinter实现机器人走迷宫
2018/01/22 Python
python爬取m3u8连接的视频
2018/02/28 Python
python3 面向对象__类的内置属性与方法的实例代码
2018/11/09 Python
Django中使用Celery的方法示例
2018/11/29 Python
Python字典遍历操作实例小结
2019/03/05 Python
python从list列表中选出一个数和其对应的坐标方法
2019/07/20 Python
Python使用type动态创建类操作示例
2020/02/29 Python
浅谈pytorch 模型 .pt, .pth, .pkl的区别及模型保存方式
2020/05/25 Python
python map比for循环快在哪
2020/09/21 Python
H5 meta小结(前端必看篇)
2016/08/24 HTML / CSS
html5简介_动力节点Java学院整理
2017/07/07 HTML / CSS
移动端开发HTML5页面点击按钮后出现闪烁或黑色背景的解决办法
2018/09/19 HTML / CSS
eDreams德国:南欧领先的在线旅游公司
2020/12/07 全球购物
八一建军节营销活动方案
2014/08/31 职场文书
党的群众路线教育实践活动批评与自我批评范文
2014/10/16 职场文书
西安事变观后感
2015/06/12 职场文书
宾馆客房管理制度
2015/08/06 职场文书
MySQL约束(创建表时的各种条件说明)
2022/06/21 MySQL