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数组操作学习总结
Nov 04 Javascript
javascript的事件触发器介绍的实现
Jun 05 Javascript
js实现点击后将文字或图片复制到剪贴板的方法
Aug 04 Javascript
浅谈js和css内联外联注意事项
Jun 30 Javascript
浅谈js函数中的实例对象、类对象、局部变量(局部函数)
Nov 20 Javascript
微信小程序 缓存(本地缓存、异步缓存、同步缓存)详解
Jan 17 Javascript
AngularJS 实现点击按钮获取验证码功能实例代码
Jul 13 Javascript
JavaScript累加、迭代、穷举、递归等常用算法实例小结
May 08 Javascript
React 项目迁移 Webpack Babel7的实现
Sep 12 Javascript
VSCode使用之Vue工程配置eslint
Apr 30 Javascript
快速搭建Node.js(Express)用户注册、登录以及授权的方法
May 09 Javascript
浅谈webpack 四个核心概念之Entry
Jun 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中的strtr函数使用介绍(str_replace)
2011/10/20 PHP
PHP函数func_num_args用法实例分析
2015/12/07 PHP
PHP文件缓存smarty模板应用实例分析
2016/02/26 PHP
php实现微信企业转账功能
2018/10/02 PHP
不用写JS也能使用EXTJS视频演示
2008/12/29 Javascript
Jquery作者John Resig自己封装的javascript 常用函数
2009/11/09 Javascript
JS与C#编码解码
2013/12/03 Javascript
纯js实现无限空间大小的本地存储
2015/06/18 Javascript
JS组件Bootstrap Table布局详解
2016/05/27 Javascript
JS Ajax请求如何防止重复提交
2016/06/13 Javascript
js canvas实现擦除动画
2016/07/16 Javascript
nodejs个人博客开发第五步 分配数据
2017/04/12 NodeJs
利用 spin.js 生成等待效果(js 等待效果)
2017/06/25 Javascript
基于jquery实现多选下拉列表
2017/08/02 jQuery
JS调用安卓手机摄像头扫描二维码
2018/10/16 Javascript
vue-父子组件和ref实例详解
2019/11/10 Javascript
[02:30]DOTA2英雄基础教程 暗影恶魔
2013/12/17 DOTA
[02:56]DOTA2上海特锦赛小组赛解说FreeAgain采访花絮
2016/02/27 DOTA
[01:09:50]VP vs Pain 2018国际邀请赛小组赛BO2 第二场
2018/08/20 DOTA
Python中pygame安装方法图文详解
2015/11/11 Python
利用python程序生成word和PDF文档的方法
2017/02/14 Python
Tensorflow实现卷积神经网络用于人脸关键点识别
2018/03/05 Python
Python批量删除只保留最近几天table的代码实例
2019/04/01 Python
Python OS模块实例详解
2019/04/15 Python
python文件操作的简单方法总结
2019/11/07 Python
Python如何定义有可选参数的元类
2020/07/31 Python
python读取xml文件方法解析
2020/08/04 Python
CSS3 边框效果
2019/11/04 HTML / CSS
俄语翻译实习生的自我评价分享
2013/11/06 职场文书
先进事迹报告会感言
2014/01/24 职场文书
2014年仓库工作总结
2014/11/20 职场文书
2015年小学生新年寄语
2014/12/08 职场文书
MySQL数据库必备之条件查询语句
2021/10/15 MySQL
详解JS数组方法
2021/11/20 Javascript
Golang jwt身份认证
2022/04/20 Golang
Nginx报404错误的详细解决方法
2022/07/23 Servers