基于JavaScript实现简单的轮播图


Posted in Javascript onMarch 03, 2021

本文实例为大家分享了JavaScript实现简单的轮播图的具体代码,供大家参考,具体内容如下

js轮播图实现思路

1、先获取元素 盒子 左右按钮
2、鼠标经过 显示/隐藏 左右侧按钮
3、动态生成小圆圈、 添加自定义属性
4、小圆圈点击事件 添加current类名
5、添加动画事件 animate 等于 -索引号*focusWidth
6、克隆第一张图片到最后面
7、添加右侧/左侧按钮点击事件
8、设置定时器 手动调用右侧按钮点击事件

html代码部分

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

<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <link rel="stylesheet" href="css/index.css" >
 <script src="js/index.js"></script>
</head>

<body>
 <div class="focus">
 <a href="javascript:;" class="arrow_r">></a>
 <a href="javascript:;" class="arrow_l">
  <</a>
  <ul>
   <li>
   <a href=""><img src="images/focus.jpg" alt=""></a>
   </li>
   <li>
   <a href=""><img src="images/focus1.jpg" alt=""></a>
   </li>
   <li>
   <a href=""><img src="images/focus2.jpg" alt=""></a>
   </li>
   <li>
   <a href=""><img src="images/focus3.jpg" alt=""></a>
   </li>
  </ul>
  <ol class="circle">
  </ol>
 </div>
</body>

</html>

css样式部分

* {
 padding: 0;
 margin: 0;
 }
 
 li {
 list-style: none;
 }
 
 img {
 border: 0;
 vertical-align: top;
 }
 
 a {
 text-decoration: none;
 }
 
 .focus {
 position: relative;
 width: 721px;
 height: 455px;
 margin: 100px auto;
 overflow: hidden;
 }
 
 .focus ul {
 position: absolute;
 top: 0;
 left: 0;
 width: 600%;
 }
 
 .focus ul li {
 float: left;
 }
 
 .arrow_r,
 .arrow_l {
 display: none;
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 width: 40px;
 height: 40px;
 line-height: 40px;
 text-align: center;
 font-size: 24px;
 background: rgba(0, 0, 0, .2);
 color: #fff;
 z-index: 1;
 }
 
 .arrow_r {
 right: 0;
 }
 
 .circle {
 position: absolute;
 bottom: 10px;
 left: 50px;
 }
 
 .circle li {
 float: left;
 width: 8px;
 height: 8px;
 border: 2px solid rgba(255, 255, 255, .5);
 border-radius: 50%;
 margin: 0 3px;
 cursor: pointer;
 }
 
 .current {
 background-color: #fff;
 }

javascript部分

window.addEventListener('load', function() {
 //获取元素
 var focus = document.querySelector('.focus');
 var arrow_r = document.querySelector('.arrow_r');
 var arrow_l = document.querySelector('.arrow_l');
 var focusWidth = focus.offsetWidth;
 // 鼠标经过focus盒子 显示/隐藏 左右侧按钮 暂停轮播
 focus.addEventListener('mouseenter', function() {
 arrow_r.style.display = 'block';
 arrow_l.style.display = 'block';
 clearInterval(timer);
 timer = null;
 });
 focus.addEventListener('mouseleave', function() {
 arrow_r.style.display = 'none';
 arrow_l.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++) {
 var li = document.createElement('li');
 li.setAttribute('index', i);
 ol.appendChild(li);
 //小圆圈点击事件
 li.addEventListener('click', function() {
  for (var i = 0; i < ol.children.length; i++) {
  ol.children[i].className = '';
  }
  var index = this.getAttribute('index');
  num = index;
  circle = index;
  this.className = 'current';
  animate(ul, -index * focusWidth);
 })
 }
 ol.children[0].className = 'current';
 //克隆第一张图片放到最后一张
 var fis = ul.children[0].cloneNode(true);
 ul.appendChild(fis);
 //右侧按钮点击事件
 var num = 0;
 var circle = 0;
 arrow_r.addEventListener('click', function() {
 if (num === ul.children.length - 1) {
  ul.style.left = 0;
  num = 0;
 }
 num++;
 animate(ul, -num * focusWidth);
 circle++;
 if (circle === ul.children.length - 1) {
  circle = 0;
 }
 for (var i = 0; i < ol.children.length; i++) {
  ol.children[i].className = '';
 }
 ol.children[circle].className = 'current';
 });
 //左侧按钮点击事件
 arrow_l.addEventListener('click', function() {
 if (num == 0) {
  num = ul.children.length - 1;
  ul.style.left = -num * focusWidth + 'px';

 }
 num--;
 animate(ul, -num * focusWidth);
 circle--;
 circle = circle < 0 ? ol.children.length - 1 : circle;
 // 调用函数
 circleChange();
 });
 //清除其余小圆圈的current类名
 function circleChange() {
 for (var i = 0; i < ol.children.length; i++) {
  ol.children[i].className = '';
 }
 // 留下当前的小圆圈的current类名
 ol.children[circle].className = 'current';
 }
 //动画函数
 function animate(obj, target, 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';

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
学习YUI.Ext 第七天--关于View&amp;JSONView
Mar 10 Javascript
兼容ie和firefox js关闭代码
Dec 11 Javascript
使用JavaScript 实现各种跨域的方法
May 08 Javascript
jQuery实现列表自动循环滚动鼠标悬停时停止滚动
Sep 06 Javascript
javascript中数组array及string的方法总结
Nov 28 Javascript
jquery实现浮动的侧栏实例
Jun 25 Javascript
跟我学习javascript的闭包
Nov 16 Javascript
编写高质量JavaScript代码的基本要点
Mar 02 Javascript
微信小程序自定义tabBar组件开发详解
Sep 24 Javascript
laydate时间日历插件使用方法详解
Nov 14 Javascript
javascript实现超好看的3D烟花特效
Jan 01 Javascript
JS数组方法reverse()用法实例分析
Jan 18 Javascript
js面向对象方式实现拖拽效果
Mar 03 #Javascript
Vue多选列表组件深入详解
Mar 02 #Vue.js
Vue2.x-使用防抖以及节流的示例
Mar 02 #Vue.js
Vue中避免滥用this去读取data中数据
Mar 02 #Vue.js
详解微信小程序(Taro)手动埋点和自动埋点的实现
Mar 02 #Javascript
vue脚手架项目创建步骤详解
Mar 02 #Vue.js
javascript实现简单页面倒计时
Mar 02 #Javascript
You might like
以文本方式上传二进制文件的PHP程序
2006/10/09 PHP
用PHP+MySql编写聊天室
2006/10/09 PHP
php数组函数序列之asort() - 对数组的元素值进行升序排序,保持索引关系
2011/11/02 PHP
神盾加密解密教程(二)PHP 神盾解密
2014/06/08 PHP
php中动态变量用法实例
2015/06/10 PHP
PHP封装的Twitter访问类实例
2015/07/18 PHP
Win7环境下Apache连接MySQL提示连接已重置的解决办法
2017/05/09 PHP
php探针不显示内存解决方法
2019/09/17 PHP
jQuery 打造动态渐变按钮 详细图文教程
2010/04/25 Javascript
javascript onmouseout 解决办法
2010/07/17 Javascript
javascript确认框的三种使用方法
2013/12/17 Javascript
JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)
2015/11/24 Javascript
JavaScript如何实现对数字保留两位小数一位自动补零
2015/12/18 Javascript
jQuery Easyui datagrid连续发送两次请求问题
2016/12/13 Javascript
Bootstrap整体框架之CSS12栅格系统
2016/12/15 Javascript
整理关于Bootstrap模态弹出框的慕课笔记
2017/03/29 Javascript
简单实现js上传文件功能
2017/08/21 Javascript
详解10分钟学会vue滚动行为
2017/09/21 Javascript
Vue实现简单分页器
2018/12/29 Javascript
尝试用最短的Python代码来实现服务器和代理服务器
2016/06/23 Python
Python语言描述机器学习之Logistic回归算法
2017/12/21 Python
Python对excel文档的操作方法详解
2018/12/10 Python
Django 全局的static和templates的使用详解
2019/07/19 Python
tensorflow没有output结点,存储成pb文件的例子
2020/01/04 Python
Python @property原理解析和用法实例
2020/02/11 Python
Python爬虫中Selenium实现文件上传
2020/12/04 Python
2021年值得向Python开发者推荐的VS Code扩展插件
2021/01/25 Python
css3弹性盒模型实例介绍
2013/05/27 HTML / CSS
家长给孩子的表扬信
2014/01/17 职场文书
学校门卫管理制度
2014/01/30 职场文书
个人诉讼委托书范本
2014/10/17 职场文书
教师培训简讯
2015/07/20 职场文书
python3+PyQt5+Qt Designer实现界面可视化
2021/06/10 Python
Python进行区间取值案例讲解
2021/08/02 Python
《堡垒之夜》联动《刺客信条》 4月7日正式上线
2022/04/06 其他游戏
js基于div丝滑实现贝塞尔曲线
2022/09/23 Javascript