首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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);

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

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

JS实现普通轮播图特效

- Author -

KaiSarH

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
解析Javascript中难以理解的11个问题
Dec 09 Javascript
JavaScript对象的property属性详解
Apr 01 Javascript
node.js中的socket.io的广播消息
Dec 15 Javascript
Jquery Ajax xmlhttp请求成功问题
Feb 04 Javascript
利用jQuery及AJAX技术定时更新GridView的某一列数据
Dec 04 Javascript
jQuery EasyUI tree 使用拖拽时遇到的错误小结
Oct 10 Javascript
微信小程序 侧滑删除（左滑删除）
May 23 Javascript
vue移动端裁剪图片结合插件Cropper的使用实例代码
Jul 10 Javascript
浅谈vue-cli 3.0.x 初体验
Apr 11 Javascript
利用Decorator如何控制Koa路由详解
Jun 26 Javascript
Angular 中使用 FineReport不显示报表直接打印预览
Aug 21 Javascript
Vue实现数据请求拦截
Oct 23 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
ICF-7600(1) 东芝(1) 频率(1) 高放电路(1) 德劲(5) 手调机(1) 灵敏度(1) 数调机(1) RP-F11(1) TOSHIBA(1)
You might like
咖啡产品发展的三大浪潮
2021/03/04 咖啡文化
destoon实现不同会员组公司名称显示不同的颜色的方法
2014/08/22 PHP
php封装的连接Mysql类及用法分析
2015/12/10 PHP
Jquery 获取表单text,areatext,radio,checkbox,select值的代码
2009/11/12 Javascript
js 中 document.createEvent的用法
2010/08/29 Javascript
javascript和HTML5利用canvas构建猜牌游戏实现算法
2013/07/17 Javascript
JS 删除字符串最后一个字符的实现代码
2014/02/20 Javascript
javascript实现多级联动下拉菜单的方法
2015/02/06 Javascript
JavaScript通过字典进行字符串翻译转换的方法
2015/03/19 Javascript
响应式表格之固定表头的简单实现
2016/08/26 Javascript
JS实现“隐藏与显示”功能(多种方法)
2016/11/24 Javascript
原生js实现中奖信息无间隙滚动效果
2017/01/18 Javascript
用js制作淘宝放大镜效果
2020/10/28 Javascript
原生JS实现不断变化的标签
2017/05/22 Javascript
Vue.js+Layer表格数据绑定与实现更新的实例
2018/03/07 Javascript
JS实现的3des+base64加密解密算法完整示例
2018/05/18 Javascript
vue实例中data使用return包裹的方法
2018/08/27 Javascript
JS温故而知新之变量提升和时间死区
2019/01/27 Javascript
Vuex新手的理解与使用详解
2019/05/31 Javascript
js实现图片无缝循环轮播
2019/10/28 Javascript
使用JavaScript和MQTT开发物联网应用示例解析
2020/08/07 Javascript
vue实现一个获取按键展示快捷键效果的Input组件
2021/01/13 Vue.js
python在不同层级目录import模块的方法
2016/01/31 Python
python正则表达式之作业计算器
2016/03/18 Python
解决python ThreadPoolExecutor 线程池中的异常捕获问题
2020/04/08 Python
Python过滤序列元素的方法
2020/07/31 Python
PyCharm设置注释字体颜色以及是否倾斜的操作
2020/09/16 Python
python解压zip包中文乱码解决方法
2020/11/27 Python
简述网络文件系统NFS，并说明其作用
2016/10/19 面试题
销售实习自我鉴定
2013/12/07 职场文书
在校硕士自我鉴定
2014/01/23 职场文书
翻译学院毕业生自荐书
2014/02/02 职场文书
企业文明单位申报材料
2014/05/16 职场文书
12.4法制宣传日标语
2014/10/08 职场文书
公司更名通知函
2015/04/24 职场文书
python如何利用cv2.rectangle()绘制矩形框
2022/12/24 Python