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条件判断使用小技巧总结
Sep 08 Javascript
Javascript !!的作用
Dec 04 Javascript
JS input文本框禁用右键和复制粘贴功能的代码
Apr 15 Javascript
JQuery 学习笔记01 JQuery初接触
May 06 Javascript
jquery tab插件精简版分享
Sep 10 Javascript
浅析javascript中的事件代理
Nov 06 Javascript
通过Tabs方法基于easyUI+bootstrap制作工作站
Mar 28 Javascript
ajax分页效果(bootstrap模态框)
Jan 23 Javascript
JS实现控制图片显示大小的方法【图片等比例缩放功能】
Feb 18 Javascript
提高Node.js性能的应用技巧分享
Aug 10 Javascript
微信小程序 swiper组件构建轮播图的实例
Sep 20 Javascript
解决vue动态路由异步加载import组件,加载不到module的问题
Jul 26 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
PHP学习笔记之二 php入门知识
2011/01/12 PHP
深入解析php中的foreach问题
2013/06/30 PHP
PHP pear安装配置教程
2016/05/14 PHP
前淘宝前端开发工程师阿当的PPT中有JS技术理念问题
2010/01/15 Javascript
js实现在字符串中提取数字
2013/11/05 Javascript
JavaScript实现为指定对象添加多个事件处理程序的方法
2015/04/17 Javascript
jquery简单实现图片切换效果的方法
2015/05/12 Javascript
Jquery Ajax Error 调试错误的技巧
2015/11/20 Javascript
JavaScript的字符串方法汇总
2016/07/31 Javascript
js控住DOM实现发布微博效果
2016/08/30 Javascript
Jquery AJAX POST与GET之间的区别详细介绍
2016/10/17 Javascript
JS中将多个逗号替换为一个逗号的实现代码
2017/06/23 Javascript
基于vue-ssr的静态网站生成器VuePress 初体验
2018/04/17 Javascript
JavaScript轮播停留效果的实现思路
2018/05/24 Javascript
详解webpack loader和plugin编写
2018/10/12 Javascript
利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序
2019/06/07 Javascript
Vue数据双向绑定底层实现原理
2019/11/22 Javascript
js实现简单进度条效果
2020/03/25 Javascript
js中调用微信的扫描二维码功能的实现代码
2020/04/11 Javascript
vue项目中自定义video视频控制条的实现代码
2020/04/26 Javascript
Python中如何优雅的合并两个字典(dict)方法示例
2017/08/09 Python
深入理解Django的自定义过滤器
2017/10/17 Python
Python探索之爬取电商售卖信息代码示例
2017/10/27 Python
python 解决动态的定义变量名,并给其赋值的方法(大数据处理)
2018/11/10 Python
Python中flatten( ),matrix.A用法说明
2020/07/05 Python
matplotlib之pyplot模块坐标轴标签设置使用(xlabel()、ylabel())
2021/02/22 Python
英国男女奢华内衣和泳装购物网站:Figleaves
2017/01/28 全球购物
Jacques Lemans德国:奥地利钟表品牌
2019/12/26 全球购物
struct与class的区别
2014/02/03 面试题
应届毕业生的个人自我鉴定
2013/10/24 职场文书
英语专业毕业生自荐信
2013/10/28 职场文书
班主任班级寄语大全
2014/04/04 职场文书
倡议书格式及范文
2015/04/29 职场文书
学生检讨书怎么写
2015/05/07 职场文书
高三英语教学反思
2016/03/03 职场文书
基于Python实现射击小游戏的制作
2022/04/06 Python