原生js实现轮播图特效


Posted in Javascript onMay 04, 2020

轮播图也称为焦点图,是网页中比较常见的网页特效。

功能需求:

​ 1.鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮。

​ 2.点击右侧按钮一次,图片往左播放一张,以此类推,左侧按钮同理。

​ 3.图片播放的同时,下面小圆圈模块跟随一起变化。

​ 4.点击小圆圈,可以播放相应图片。

​ 5.鼠标不经过轮播图,轮播图也会自动播放图片。

​ 6.鼠标经过,轮播图模块, 自动播放停止。

此文章的代码为一个完整的轮播图的实现代码,复制即可运行

实现效果由于大小问题无法上传,可自行观看淘宝或京东首页轮播图效果

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="css/index.css" rel="external nofollow" >
 <script src="js/animate.js"></script>
 <script src="js/index.js"></script>

</head>

<body>
 <div class="box">
 <ul>
  <li><img src="img/focus.jpg" alt=""></li>
  <li><img src="img/focus1.jpg" alt=""></li>
  <li><img src="img/focus2.jpg" alt=""></li>
  <li><img src="img/focus3.jpg" alt=""></li>
 </ul>
 <ol>
 </ol>
 <div class="arr-l"> < </div>
 <div class="arr-r"> > </div>
 </div>
</body>

</html>

css文件:

* {
 margin: 0;
 padding: 0;
 outline: none;
}
.box {
 overflow: hidden;
 position: relative;
 height: 455px;
 width: 721px;
 background-color: pink;
 margin: 50px auto;
}
.box ul {
 position: absolute;
 top: 0;
 left: 0;
 width: 600%;
}
.box ul li {
 list-style: none;
 float: left;
}
.box ol {
 position: absolute;
 bottom: 10px;
 left: 100px;
 background-color: rgba(255, 255, 255, .3);
 border-radius: 8px;
 list-style: none;
 height: 10px;
 padding: 2px 5px;
}
.box ol li {
 cursor: pointer;
 float: left;
 height: 8px;
 width: 8px;
 border: 1px solid #fff;
 border-radius: 50%;
 margin: 0 5px;
}
.arr-l,
.arr-r {
 display: none;
 color: #fff;
 cursor: pointer;
 position: absolute;
 height: 40px;
 width: 30px;
 background-color: rgba(0, 0, 0, .3);
 line-height: 40px;
 text-align: center;
}
.arr-l {
 top: 50%;
 left: 0;
 transform: translateY(-50%);
}
.arr-r {
 right: 0;
 top: 50%;
 transform: translateY(-50%);
}
.current {
 background-color: #fff;
}

动画实现js文件animate.js:

function animate(obj, target, callback) {
 clearInterval(obj.timer);
 obj.timer = setInterval(function () {
 if (target - obj.offsetLeft > 0) {
  var step = Math.ceil((target - obj.offsetLeft) / 10);
 } else {
  var step = Math.floor((target - obj.offsetLeft) / 10);
 }

 if (obj.offsetLeft == target) {
  clearInterval(obj.timer);
  callback && callback();
 }
 obj.style.left = obj.offsetLeft + step + 'px';
 }, 15)
}

index.js:

window.addEventListener('load', function () {
 var arrl = this.document.querySelector('.arr-l');
 var arrr = this.document.querySelector('.arr-r');
 var box = this.document.querySelector('.box');
 var boxWidth = box.offsetWidth;
 box.addEventListener('mouseenter', function () {
 arrl.style.display = 'block';
 arrr.style.display = 'block';
 clearInterval(timer);
 timer = null;
 })
 box.addEventListener('mouseleave', function () {
 arrl.style.display = 'none';
 arrr.style.display = 'none';
 timer = setInterval(function () {
  arrr.click();
 }, 2000);
 });


 var ul = box.querySelector('ul');
 var ol = box.querySelector('ol');
 for (var i = 0; i < ul.children.length; i++) {
 var li = document.createElement('li');
 li.setAttribute('data-index', i);
 ol.appendChild(li);
 ol.children[0].className = 'current';
 li.addEventListener('click', function () {
  for (var i = 0; i < ol.children.length; i++) {
  ol.children[i].className = '';
  }

  this.className = 'current';
  var dateindex = this.getAttribute('data-index');
  num = dateindex;
  circle = dateindex;
  animate(ul, -dateindex * boxWidth);
 });
 }

 var first = ul.children[0].cloneNode(true);
 ul.appendChild(first);

 var num = 0;
 var circle = 0;
 var flag = true;
 arrr.addEventListener('click', function () {
 if (flag) {
  flag = false;
  if (num == ul.children.length - 1) {
  ul.style.left = 0;
  num = 0;
  }
  num++;
  animate(ul, -num * boxWidth, function () {
  flag = true;
  });
  circle++;
  if (circle == ol.children.length) {
  circle = 0;
  }
  circleChange();
 }

 });
 arrl.addEventListener('click', function () {
 if (flag) {
  flag = false;
  if (num == 0) {
  num = ul.children.length - 1;
  ul.style.left = -num * boxWidth + 'px';
  }
  num--;
  animate(ul, -num * boxWidth, function () {
  flag = true;
  });
  circle--;
  if (circle < 0) {
  circle = ol.children.length - 1;
  }
  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 () {
 arrr.click();
 }, 2000);
})

注意事项

引用两个js文件时,animate.js要在index.js之前引用,因为index.js中要用到animate.js里的函数。

精彩专题分享:jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播

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

Javascript 相关文章推荐
用JQuery 实现AJAX加载XML并解析的脚本
Jul 25 Javascript
js字母大小写转换实现方法总结
Nov 13 Javascript
解决jquery中美元符号命名冲突问题
Jan 08 Javascript
jquery使用on绑定a标签无效 只能用live解决
Jun 02 Javascript
Javascript农历与公历相互转换的简单实例
Oct 09 Javascript
详解如何在vue中使用sass
Jun 21 Javascript
基于JS实现移动端左滑删除功能
Jul 28 Javascript
select2 ajax 设置默认值,初始值的方法
Aug 09 Javascript
Angular父子组件通过服务传参的示例方法
Oct 31 Javascript
express如何解决ajax跨域访问session失效问题详解
Jun 20 Javascript
vue+ESLint 配置保存 自动格式化代码
Mar 17 Javascript
js实现弹幕墙效果
Dec 10 Javascript
jquery实现手风琴案例
May 04 #jQuery
autojs 蚂蚁森林能量自动拾取即给指定好友浇水的实现方法
May 03 #Javascript
解决React在安装antd之后出现的Can't resolve './locale'问题(推荐)
May 03 #Javascript
vue自定义标签和单页面多路由的实现代码
May 03 #Javascript
JavaScript函数重载操作实例浅析
May 02 #Javascript
有趣的JavaScript隐式类型转换操作实例分析
May 02 #Javascript
react-router-dom 嵌套路由的实现
May 02 #Javascript
You might like
php引用地址改变变量值的问题
2012/03/23 PHP
PHP安全性漫谈
2012/06/28 PHP
CodeIgniter基本配置详细介绍
2013/11/12 PHP
PHP面向对象程序设计之接口用法
2014/08/20 PHP
如何利用PHP实现上传图片功能详解
2020/09/24 PHP
使用时间戳解决ie缓存的问题
2014/08/20 Javascript
JavaScript中获取样式的原生方法小结
2014/10/08 Javascript
js实现div弹出层的方法
2014/11/20 Javascript
BootStrap中Tab页签切换实例代码
2016/05/30 Javascript
详解angularjs中如何实现控制器和指令之间交互
2017/05/31 Javascript
JavaScript阻止表单提交方法(附代码)
2017/08/15 Javascript
vue计算属性时v-for处理数组时遇到的一个bug问题
2018/01/21 Javascript
Node.js使用MySQL连接池的方法实例
2018/02/11 Javascript
Vue快速实现通用表单验证的示例代码
2020/01/09 Javascript
[01:13]2015国际邀请赛线下观战现场
2015/08/08 DOTA
[46:12]完美世界DOTA2联赛循环赛 DM vs Matador BO2第一场 11.04
2020/11/04 DOTA
在Python中使用SimpleParse模块进行解析的教程
2015/04/11 Python
python实现可视化动态CPU性能监控
2018/06/21 Python
Python中查看变量的类型内存地址所占字节的大小
2019/06/26 Python
基于python实现蓝牙通信代码实例
2019/11/19 Python
python+selenium+Chrome options参数的使用
2020/03/18 Python
Python unittest单元测试框架实现参数化
2020/04/29 Python
Python如何基于Tesseract实现识别文字功能
2020/06/05 Python
python 爬取百度文库并下载(免费文章限定)
2020/12/04 Python
Myholidays美国:在线旅游网站
2019/08/16 全球购物
总经理助理岗位职责
2013/11/08 职场文书
五年级音乐教学反思
2014/02/06 职场文书
中文教师求职信
2014/02/22 职场文书
2014公司党员自我评价范文
2014/09/11 职场文书
财政局党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
茶花女读书笔记
2015/06/29 职场文书
创业计划书之珠宝饰品
2019/08/26 职场文书
62句有关感恩节文案(推荐收藏)
2019/11/28 职场文书
MySQL官方导出工具mysqlpump的使用
2021/05/21 MySQL
react 项目中引入图片的几种方式
2021/06/02 Javascript
Vue 打包后相对路径的引用问题
2022/06/05 Vue.js