JS实现普通轮播图特效


Posted in Javascript onJanuary 01, 2020

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

知识点

JS实现普通轮播图特效

轮播图思想:

① 建立一个全局变量索引,始终标记当前显示图片。
② 根据当前图片的数量,动态创建下方的●图片指示器。
③ 轮播图的初始状态为第一张图片在中间,剩余所有图片均放在即将显示图片位置。
④ 当点击>的时候,当前图片调用动画移动函数进行左移,与此同时新的一张图片调用动画函数移入到div中,而会将下一张展示的图片移动到div右侧。
⑤ 需要进行边界判断,如果当前的图片大于图片数量或者小于等于0,重新给索引赋值。
⑥ 当点击图片指示器的时候,首先判定点击的与索引的位置关系,然后进行动画移动。
⑦ 给div添加定时器,自动移动图片。当鼠标进入div,删除定时器,当鼠标移出div,设置定时器。

运行效果

1.自动轮播
2.点击左右切换图片
3.点击下方图片指示器切换图片

JS实现普通轮播图特效

代码

引入MyTools.js库

1.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <link rel="stylesheet" href="1.css" rel="external nofollow" >
</head>
<body>
<div id="box">
 <div id="box_content">
 <div class="box_img"><img src="casual01.jpg" alt=""></div>
 <div class="box_img"><img src="casual02.jpg" alt=""></div>
 <div class="box_img"><img src="casual03.jpg" alt=""></div>
 <div class="box_img"><img src="casual04.jpg" alt=""></div>
 <div class="box_img"><img src="casual05.jpg" alt=""></div>
 </div>
 <div id="box_control">
 <a href="javascript:;" class="box_control_left"><i><</i></a>
 <a href="javascript:;" class="box_control_right"><i>></i></a>
 <ul>
 </ul>
 </div>
</div>
<script src="../JavaScript学习/00MyTools/MyTools.js"></script>
<script src="1.js"></script>
</body>
</html>

2.css

*{margin: 0;padding: 0;}
a{
 color: #999;
 text-decoration: none;
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 background-color: rgba(0, 0, 0, .4);
}
a:hover{
 color: #f8b62b;
}
i{
 font-size: 50px;
 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#box{
 height: 482px;
 width: 830px;
 background-color: red;
 position: absolute;
 left: 50%;
 top: 50%;
 transform: translate(-50%,-50%);
 overflow: hidden;
}
#box_content{
 height: 100%;
 width: 100%;
 cursor: pointer;
}
#box_content img{
 position: absolute;
 vertical-align: top;
 height: 100%;
 width: 100%;
 /*left: 830px;*/
}
.box_img{
 width: 100%;
 height: 100%;
 position: absolute;}
.box_control_right{
 position: absolute;
 right: 0;
}
.box_control_left{
 position: absolute;
 left: 0;
}
ul{
 position: absolute;
 bottom: 30px;
 left: 50%;
 transform: translateX(-50%);
 display: flex;
 justify-content:space-evenly;
}
ul>li{
 list-style: none;
 width: 16px;
 height: 16px;
 background-color: #fff;
 margin: 0 3px;
 border-radius: 50%;
 cursor: pointer;
}
ul>li.current{
 background-color: darkorange;
}

3.js

window.addEventListener('load',function (ev) {
 // 轮播图
 (function () {
 // 1. 获取需要标签
 var boxContent = myTool.$('box_content');
 var contentImg = boxContent.children;
 var boxControl = myTool.$('box_control');
 var controlBottom = boxControl.children[2];
 // 2. 全局索引
 var iNow = 0;
 // 3. 根据图片个数动态添加下方图片指示器
 for (var i = 0; i < contentImg.length; i++) {
 var li = document.createElement('li');
 controlBottom.insertBefore(li,controlBottom.children[0]);
 }
 // 4. 让第一个图片指示器选中
 controlBottom.children[0].className = 'current';
 // 5. 让除了第一张图片以外所有图片进入待显示区域
 var scrollImgWidth = boxContent.offsetWidth;
 for (var j = 1; j < contentImg.length; j++) {
 contentImg[j].style.left = scrollImgWidth + 'px';
 }
 // 6. 处理左右两侧点击
 var cPrev = boxControl.children[0];
 var cNext = boxControl.children[1];
 // 6.1 点击左边
 cPrev.addEventListener('click',function (evt) {
 // 1. 当前可视区域图片快速右移
 // 2. 上一张幻灯片出现在可视区域左侧
 // 3. 让这张幻灯片做动画进入
 myTool.slowMoving(contentImg[iNow],{'left':scrollImgWidth},null);
 iNow--;
 // 边界处理
 if (iNow < 0){
 iNow = contentImg.length - 1;
 }
 contentImg[iNow].style.left = -scrollImgWidth + 'px';
 myTool.slowMoving(contentImg[iNow],{'left':0},null);
 // 切换索引
 changeIndex();

 },false);
 // 6.2 点击右边
 cNext.addEventListener('click',function (evt) {
 autoPlay();
 },false);
 // 7. 下侧图片指示器操作
 for (var k = 0; k < controlBottom.children.length; k++) {
 // 取出单个li标签
 var bottomLi = controlBottom.children[k];
 // 监听鼠标进入
 (function (index) {
 bottomLi.addEventListener('mouseover',function (evt) {
  // 比较当前索引和点击指示器位置关系
  if (index > iNow){
  myTool.slowMoving(contentImg[iNow],{'left':-scrollImgWidth},null);
  contentImg[index].style.left = scrollImgWidth + 'px';
  }else if(index < iNow){
  myTool.slowMoving(contentImg[iNow],{'left':scrollImgWidth},null);
  contentImg[index].style.left = -scrollImgWidth + 'px';
  }
  iNow = index;
  myTool.slowMoving(contentImg[iNow],{'left':0});
  // 切换索引
  changeIndex();
 },false);
 })(k)
 }

 /**
 * 切换索引操作
 */
 function changeIndex() {
 for (var i = 0; i < controlBottom.children.length; i++) {
 controlBottom.children[i].className = '';
 }
 // 当前的被选中
 controlBottom.children[iNow].className = 'current';
 }

 /**
 * 点击右侧和图片自动运动操作
 */
 function autoPlay(){
 // 1. 当前可视区域图片快速左移
 // 2. 下一张图片出现在可视区域右侧
 // 3. 让这张图片做动画进入
 myTool.slowMoving(contentImg[iNow],{'left':-scrollImgWidth},null);
 iNow++;
 // 边界处理
 if (iNow >= contentImg.length) {
 iNow = 0;
 }
 contentImg[iNow].style.left = scrollImgWidth + 'px';
 myTool.slowMoving(contentImg[iNow], {"left": 0},null);
 // 切换索引
 changeIndex();
 }

 // 8. 设置定时器
 var timerId = setInterval(autoPlay,2000);
 // 9. 鼠标进入图片div后设置和清除定时器
 myTool.$('box').addEventListener('mouseover',function () {
 clearInterval(timerId);
 });
 myTool.$('box').addEventListener('mouseout',function () {
 timerId = setInterval(autoPlay,2000);
 });

 })();
},false);

更多关于轮播图效果的专题,请点击下方链接查看学习

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

Javascript 相关文章推荐
Javascript调用XML制作连动下拉列表框
Jun 25 Javascript
Prototype源码浅析 String部分(二)
Jan 16 Javascript
基于jquery扩展漂亮的下拉框可以二次修改
Nov 19 Javascript
jquery实现鼠标拖拽滑动效果来选择数字的方法
May 04 Javascript
JavaScript动态添加style节点的方法
Jun 09 Javascript
jquery判断复选框选中状态以及区分attr和prop
Dec 18 Javascript
JS实现漂亮的时间选择框效果
Aug 20 Javascript
JavaScript制作弹出层效果
Dec 02 Javascript
vue.js学习笔记:如何加载本地json文件
Jan 17 Javascript
vue文件运行的方法教学
Feb 12 Javascript
深入理解es6块级作用域的使用
Mar 28 Javascript
如何用JavaScipt测网速
May 09 Javascript
javascript实现超好看的3D烟花特效
Jan 01 #Javascript
JavaScript工具库MyTools详解
Jan 01 #Javascript
javascript Canvas动态粒子连线
Jan 01 #Javascript
小程序新版订阅消息模板消息
Dec 31 #Javascript
小程序实现长按保存图片的方法
Dec 31 #Javascript
使用webpack搭建vue环境的教程详解
Dec 31 #Javascript
Vue 实现显示/隐藏层的思路(加全局点击事件)
Dec 31 #Javascript
You might like
PHPCMS的使用小结
2010/09/20 PHP
理解php原理的opcodes(操作码)
2010/10/26 PHP
php实现爬取和分析知乎用户数据
2016/01/26 PHP
php数据库的增删改查 php与javascript之间的交互
2017/08/31 PHP
php nginx 实时输出的简单实现方法
2018/01/21 PHP
javascript 学习笔记(一)DOM基本操作
2011/04/08 Javascript
利用JQuery动画制作滑动菜单项效果实现步骤及代码
2013/02/07 Javascript
JavaScript中数组对象的那些自带方法介绍
2013/03/12 Javascript
jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7
2014/06/16 Javascript
基于nodejs+express(4.x+)实现文件上传功能
2015/11/23 NodeJs
js动态引入的四种方法
2018/05/05 Javascript
js正则表达式校验指定字符串的方法
2018/07/23 Javascript
nodejs 生成和导出 word的实例代码
2018/07/31 NodeJs
JavaScript链式调用实例浅析
2018/12/19 Javascript
vue项目打包之后背景样式丢失的解决方案
2019/01/17 Javascript
Node.js实现用户评论社区功能(体验前后端开发的乐趣)
2019/05/09 Javascript
微信小程序中如何计算距离某个节日还有多少天
2019/07/15 Javascript
javascript实现抢购倒计时程序
2019/08/26 Javascript
详解JavaScript中的this指向问题
2021/02/05 Javascript
[02:36]DOTA2亚洲邀请赛小组赛精彩集锦:EE凭借法力虚空拿下4杀
2017/03/30 DOTA
Python的类实例属性访问规则探讨
2015/01/30 Python
深入理解Python中字典的键的使用
2015/08/19 Python
Python for Informatics 第11章之正则表达式(二)
2016/04/21 Python
python字符串过滤性能比较5种方法
2017/06/22 Python
Python 实现自动登录+点击+滑动验证功能
2020/06/10 Python
selenium切换标签页解决get超时问题的完整代码
2020/08/30 Python
英国知名的皮手套品牌:Dents
2016/11/13 全球购物
Bose美国官网:购买Bose耳机和音箱
2019/03/10 全球购物
2014年老干部工作总结
2014/11/21 职场文书
职场领导同事生日简短祝福语
2019/08/06 职场文书
PHP 对接美团大众点评团购券(门票)的开发步骤
2021/04/03 PHP
基于go interface{}==nil 的几种坑及原理分析
2021/04/24 Golang
MySQL的Query Cache图文详解
2021/07/01 MySQL
MySQL表类型 存储引擎 的选择
2021/11/11 MySQL
Python基本知识点总结
2022/04/07 Python
vue3引入highlight.js进行代码高亮的方法实例
2022/04/08 Vue.js