原生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 相关文章推荐
Prototype1.5 rc2版指南最后一篇之Position
Jan 10 Javascript
使用JS取得焦点(focus)元素代码
Mar 22 Javascript
js禁止页面刷新与后退的方法
Jun 08 Javascript
jQuery实现图片走马灯效果的原理分析
Jan 16 Javascript
用canvas 实现个图片三角化(LOW POLY)效果
Feb 18 Javascript
Vue单页及多页应用全局配置404页面实践记录
May 22 Javascript
vue 中引用gojs绘制E-R图的方法示例
Aug 24 Javascript
javascript将非数值转换为数值
Sep 13 Javascript
vue-cli项目中使用echarts图表实例
Oct 22 Javascript
关于微信公众号开发无法支付的问题解决
Dec 28 Javascript
微信小程序开发实现的IP地址查询功能示例
Mar 28 Javascript
浅谈Vue3.0新版API之composition-api入坑指南
Apr 30 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分页函数完整实例代码
2014/09/22 PHP
PHP+MySql+jQuery实现的&quot;顶&quot;和&quot;踩&quot;投票功能
2016/05/21 PHP
详解php用curl调用接口方法,get和post两种方式
2017/01/13 PHP
yii2安装详细流程
2018/05/23 PHP
JavaScript动态调整TextArea高度的代码
2010/12/28 Javascript
JavaScript解析URL参数示例代码
2013/08/12 Javascript
jquery 插件实现多行文本框[textarea]自动高度
2015/03/04 Javascript
浅谈js键盘事件全面控制
2016/12/01 Javascript
jquery拼接ajax 的json和字符串拼接的方法
2017/03/11 Javascript
基于AngularJS实现表单验证功能
2017/07/28 Javascript
使用jquery+iframe做一个ajax上传效果(实例)
2017/08/24 jQuery
使用Vue-Router 2实现路由功能实例详解
2017/11/14 Javascript
深入浅析Node.js 事件循环、定时器和process.nextTick()
2018/10/22 Javascript
关于JavaScript中异步/等待的用法与理解
2020/11/18 Javascript
JS指定音频audio在某个时间点进行播放
2020/11/28 Javascript
python和C语言混合编程实例
2014/06/04 Python
Python的Flask框架与数据库连接的教程
2015/04/20 Python
Django admin美化插件suit使用示例
2017/12/12 Python
python修改list中所有元素类型的三种方法
2018/04/09 Python
pytorch 调整某一维度数据顺序的方法
2018/12/08 Python
python实现一行输入多个值和一行输出多个值的例子
2019/07/16 Python
Pandas时间序列:重采样及频率转换方式
2019/12/26 Python
python如何通过闭包实现计算器的功能
2020/02/22 Python
Python tempfile模块生成临时文件和临时目录
2020/09/30 Python
html5构建触屏网站之网站尺寸探讨
2013/01/07 HTML / CSS
浅谈Html5页面打开app的一些思考
2020/03/30 HTML / CSS
Linux内核产生并发的原因
2016/11/08 面试题
美术国培研修感言
2014/02/12 职场文书
2014年高考决心书
2014/03/11 职场文书
竞选班干部演讲稿500字
2014/08/20 职场文书
2014大学生职业生涯规划书最新范文
2014/09/13 职场文书
建设办主任四风问题整改思路和措施
2014/09/20 职场文书
教师自荐信范文
2015/03/06 职场文书
pytorch锁死在dataloader(训练时卡死)
2021/05/28 Python
死磕 java同步系列之synchronized解析
2021/06/28 Java/Android
golang的文件创建及读写操作
2022/04/14 Golang