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函数内部this指针指向的三种方法
Apr 23 Javascript
Lua表达式和控制结构学习笔记
Dec 15 Javascript
jQuery实现长按按钮触发事件的方法
Feb 02 Javascript
javascript实现网页字符定位的方法
Jul 14 Javascript
JavaScript如何调试有哪些建议和技巧附五款有用的调试工具
Oct 28 Javascript
Avalon中文长字符截取、关键字符隐藏、自定义过滤器
May 18 Javascript
使用jQuery中的wrap()函数操作HTML元素的教程
May 24 Javascript
JavaScript中利用构造器函数模拟类的方法
Feb 16 Javascript
js实现加载页面就自动触发超链接的示例
Aug 31 Javascript
基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)
Nov 02 Javascript
微信小程序自定义组件封装及父子间组件传值的方法
Aug 28 Javascript
解决微信小程序云开发中获取数据库的内容为空的方法
May 15 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
windows下zendframework项目环境搭建(通过命令行配置)
2012/12/06 PHP
Linux下编译redis和phpredis的方法
2016/04/07 PHP
Laravel5.5以下版本中如何自定义日志行为详解
2018/08/01 PHP
jQuery 自定义函数写法分享
2012/03/30 Javascript
web的各种前端打印方法之jquery打印插件jqprint实现网页打印
2013/01/09 Javascript
JQuery插件开发示例代码
2013/11/06 Javascript
jquery的ajax简单结构示例代码
2014/02/17 Javascript
jquery.hotkeys监听键盘按下事件keydown插件
2014/05/11 Javascript
jquery模拟LCD 时钟的html文件源代码
2014/06/16 Javascript
JsRender实用入门教程
2014/10/31 Javascript
jQuery中DOM树操作之复制元素的方法
2015/01/23 Javascript
jQuery编程中的一些核心方法简介
2015/08/14 Javascript
jquery 判断selection range 是否在容器中的简单实例
2016/08/02 Javascript
JavaScript里 ==与===区别详解
2016/08/16 Javascript
在html中引入外部js文件,并调用带参函数的方法
2016/10/31 Javascript
详解Vue 普通对象数据更新与 file 对象数据更新
2017/04/26 Javascript
详解使用angular-cli发布i18n多国语言Angular应用
2017/05/20 Javascript
Angular实现搜索框及价格上下限功能
2018/01/19 Javascript
vue组件jsx语法的具体使用
2018/05/21 Javascript
浅析vue给不同环境配置不同打包命令
2018/08/17 Javascript
详解小程序循环require之坑
2019/03/08 Javascript
React中使用UMEditor的方法示例
2019/12/27 Javascript
python 爬取微信文章
2016/01/30 Python
利用python实现短信和电话提醒功能的例子
2019/08/08 Python
Anaconda 查看、创建、管理和使用python环境的方法
2019/12/03 Python
修改Pandas的行或列的名字(重命名)
2019/12/18 Python
virtualenv介绍及简明教程
2020/06/23 Python
Python爬虫如何应对Cloudflare邮箱加密
2020/06/24 Python
荷兰网上鞋店:Ziengs.nl
2017/01/02 全球购物
Under Armour安德玛英国官网:美国高端运动科技品牌
2018/09/17 全球购物
泰海淘:泰国king Power王权免税集团旗下跨境海淘综合型电商
2020/07/26 全球购物
Conforama瑞士:家具、厨房、电器、装饰
2020/09/06 全球购物
医学生临床实习自我评价
2014/03/07 职场文书
小学生期末评语大全
2014/04/21 职场文书
买房子个人收入证明
2014/10/12 职场文书
2015年车间管理工作总结
2015/07/23 职场文书