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 相关文章推荐
JQuery index()方法使用代码
Jun 02 Javascript
利用js的Node遍历找到repeater的一个字段实例介绍
Apr 25 Javascript
Javascript排序算法之合并排序(归并排序)的2个例子
Apr 04 Javascript
使用FlexiGrid实现Extjs表格效果方法分享
Dec 16 Javascript
jQuery热气球动画半透明背景的后台登录界面代码分享
Aug 28 Javascript
Vue实现动态显示textarea剩余字数
May 22 Javascript
实例详解JavaScript中setTimeout函数的执行顺序
Jul 12 Javascript
jQuery滑动效果实现方法分析
Sep 05 jQuery
trackingjs+websocket+百度人脸识别API实现人脸签到
Nov 26 Javascript
微信小程序sessionid不一致问题解决
Aug 30 Javascript
JS实现点餐自动选择框(案例分析)
Dec 10 Javascript
vue实现可以快进后退的跑马灯组件
Apr 08 Vue.js
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中将html中的br换行符转换为文本输入中的换行符
2013/03/26 PHP
php判断是否连接上网络的方法实例详解
2016/12/14 PHP
在浏览器中获取当前执行的脚本文件名的代码
2011/07/19 Javascript
30个让人兴奋的视差滚动(Parallax Scrolling)效果网站
2012/03/04 Javascript
javascript:;与javascript:void(0)使用介绍
2013/06/05 Javascript
JavaScript获取onclick、onchange等事件值的代码
2013/07/22 Javascript
jquery easyui中treegrid用法的简单实例
2014/02/18 Javascript
JavaScript中如何通过arguments对象实现对象的重载
2014/05/12 Javascript
jquery实现类似EasyUI的页面布局可改变左右的宽度
2020/09/12 Javascript
JavaScript AJAX之惰性载入函数
2014/08/27 Javascript
javascript刷新父页面的各种方法汇总
2014/09/03 Javascript
jQuery插件jFade实现鼠标经过的图片高亮其它变暗
2015/03/14 Javascript
JavaScript中的acos()方法使用详解
2015/06/14 Javascript
JavaScript对象属性检查、增加、删除、访问操作实例
2015/07/08 Javascript
JS排序之选择排序详解
2017/04/08 Javascript
基于Swiper实现移动端页面图片轮播效果
2017/12/28 Javascript
浅谈webpack4.x 入门(一篇足矣)
2018/09/05 Javascript
AngularJS 多指令Scope问题的解决
2018/10/25 Javascript
vue项目中axios请求网络接口封装的示例代码
2018/12/18 Javascript
vue-socket.io接收不到数据问题的解决方法
2020/05/13 Javascript
python通过openpyxl生成Excel文件的方法
2015/05/12 Python
简单讲解Python中的字符串与字符串的输入输出
2016/03/13 Python
使用pyecharts生成Echarts网页的实例
2019/08/12 Python
python 字符串常用函数详解
2019/09/11 Python
Python模块汇总(常用第三方库)
2019/10/07 Python
Python编程快速上手——选择性拷贝操作案例分析
2020/02/28 Python
Python StringIO及BytesIO包使用方法解析
2020/06/15 Python
2020年10款优秀的Python第三方库,看看有你中意的吗?
2021/01/12 Python
CSS3中的常用选择器使用示例整理
2016/06/13 HTML / CSS
Html5无刷新修改browser Url的方法
2014/01/15 HTML / CSS
加拿大时尚潮流大码女装购物网站:Addition Elle
2018/04/02 全球购物
2015年元旦促销方案书
2014/12/09 职场文书
课改心得体会范文
2016/01/25 职场文书
Python 使用dict实现switch的操作
2021/04/07 Python
为什么MySQL8新特性会修改自增主键属性
2022/04/18 MySQL