基于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 相关文章推荐
js 获取(接收)地址栏参数值的方法
Apr 01 Javascript
Javascript浮点数乘积运算出现多位小数的解决方法
Feb 17 Javascript
JavaScript中使用ActiveXObject操作本地文件夹的方法
Mar 28 Javascript
jQuery事件处理的特征(事件命名机制)
Aug 23 Javascript
jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】
Sep 04 Javascript
js实现碰撞检测特效代码分享
Oct 16 Javascript
javascript将list转换成树状结构的实例
Sep 08 Javascript
在webstorm开发微信小程序之使用阿里自定义字体图标的方法
Nov 15 Javascript
ES6入门教程之let、const的使用方法
Apr 13 Javascript
Element-UI+Vue模式使用总结
Jan 02 Javascript
解决vue-router 嵌套路由没反应的问题
Sep 22 Javascript
Vue中正确使用Element-UI组件的方法实例
Oct 13 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 正则 过滤html 的超链接
2009/06/02 PHP
php使用session二维数组实例
2014/11/06 PHP
PHP实现简单搜歌的方法
2015/07/28 PHP
浅析Yii2中GridView常见操作
2016/04/22 PHP
PHP 结合 Boostrap 结合 js 实现学生列表删除编辑及搜索功能
2019/05/21 PHP
js仿百度有啊通栏展示效果实现代码
2013/05/28 Javascript
jquery mobile动态添加元素之后不能正确渲染解决方法说明
2014/03/05 Javascript
用jquery实现动画跳到顶部和底部(这个比较简单)
2014/09/01 Javascript
window.open()实现post传递参数
2015/03/12 Javascript
javascript制作照片墙及制作过程中出现的问题
2016/04/04 Javascript
jQuery中Ajax全局事件引用方式及各个事件(全局/局部)执行顺序
2016/06/02 Javascript
jQuery数据检索中根据关键字快速定位GridView指定行的实现方法
2016/06/08 Javascript
快速解决js中window.location.href不工作的问题
2016/11/02 Javascript
解读ES6中class关键字
2017/11/20 Javascript
jquery登录的异步验证操作示例
2019/05/09 jQuery
微信小程序之 catalog 切换实现解析
2019/09/12 Javascript
WEB前端性能优化的7大手段详解
2020/02/04 Javascript
利用打码兔和超人打码自封装的打码类分享
2014/03/16 Python
Python读取ini文件、操作mysql、发送邮件实例
2015/01/01 Python
深入浅析python继承问题
2016/05/29 Python
简单谈谈Python中的几种常见的数据类型
2017/02/10 Python
python executemany的使用及注意事项
2017/03/13 Python
用Python将mysql数据导出成json的方法
2018/08/21 Python
Python分类测试代码实例汇总
2020/07/23 Python
Python selenium环境搭建实现过程解析
2020/09/08 Python
python实现猜拳游戏项目
2020/11/30 Python
CSS3 实现发光边框特效
2020/11/11 HTML / CSS
实习护士自我鉴定
2013/10/13 职场文书
教师应聘个人求职信
2013/12/10 职场文书
政法学院毕业生求职信
2014/02/28 职场文书
六一文艺汇演开幕词
2015/01/29 职场文书
通讯稿范文
2015/07/22 职场文书
生日宴会祝酒词
2015/08/10 职场文书
机关单位2016年创先争优活动总结
2016/04/05 职场文书
2020优秀员工演讲稿(三篇)
2019/10/17 职场文书
使用ICOM IC-R9500接收机同时测评十台收音机中波接收性能
2022/05/10 无线电