js 基础篇必看(点击事件轮播图的简单实现)


Posted in Javascript onAugust 20, 2016

轮播图在以后的应用中还是比较常见的,不需要多少行代码就能实现。但是在只掌握了js基础知识的情况下,怎么来用较少的而且逻辑又简单的方法来实现呢?下面来分析下几种不同的做法:

1、利用位移的方法来实现

首先,我们可以在body中添加一个div并且将宽度设置成百分比(自适应页面),比例具体是相对谁的百分比的话按需求来做,在这里不多说。将图片放入到div 中。

其次,样式部分将img标签全部设置成absolute;以方便定位

最后,js部分说说逻辑,定义两个空数组,第一个数组用来保存初始的显示在页面的图片和等待进入的图片,第二个数组保存其余的n张图片,假设这两个数组分别设置为:waitToShow=[]; 和 goOut=[];   waitToShow.shift();弹出第一张图片假如命名为showFirst,并为showFirst图片设置位移和移动时间,执行完成之后showFirst放入goOut尾部:goOut.push(showFirst);  这时waitToShow数组的第0个元素就变成原来的第二张要显示的图片,给这个图片waitToShow[0]设置位移和移动时间,并且将goOut数组的首元素图片弹出来,在放进waitToShow数组的尾部,保证waitToShow数组永远是一张显示的图片和待显示的图片,这样就通过两个数组形成了一个循环来完成轮播图的实现。反向的逻辑是一样的(由于逻辑过于复杂这里不推荐)

2、利用层级的高低来使最顶部图片变化的做法(这个做法没有位移的动作,但是逻辑却非常简便,很实用)

直接来代码更直观点:基本每行都有注释

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>轮播图 (闪现 自适应)</title>
<style media="screen">
* {
margin: 0;
padding: 0;
}
.wrap {
width: 60%;
background: red;
margin: auto;
position: relative;
}
.wrap img {
width: 100%;
position: absolute;
/*z-index: 10;*/
}
input {
border: 1px solid lightgray;
width: 50px;
height: 30px;
background: red;
border-radius: 5px;
font-size: 20px;
}
</style>
</head>
<body>
<div class="wrap">
<img src="img/01.jpg" alt="" />
<img src="img/02.jpg" alt="" />
<img src="img/03.jpg" alt="" />
<img src="img/04.jpg" alt="" />
</div>
<input type="button" id="butLeft" name="name" value="◀︎">
<input type="button" id="butRight" name="name" value="▶︎">
</body>
<script type="text/javascript">
// 获取images元素生成字符串数组,字符串数组不能进行push pop splice 等操作
// 所以要将它的值重新存放进一个数组中,后面有定义
var images = document.getElementsByTagName('img');
var butLeft = document.getElementById('butLeft');
var butRight = document.getElementById('butRight');
//获取变量index 用来为后面设置层级用
var index = 1000;
// 获取一个空的数组,用来存放images里面的字符串元素
var imagess = [];

// for循环用来给imagess数组赋值,并且改变数组中的元素的层级
for (var i = 0; i < images.length; i++) {
imagess[i] = images[i];
var currentImage = imagess[i];
// 当前图片的层级的设置,一轮for循环都为他们设置了初始的zIndex,图片越靠前,层级设置
// 要求越高,所以用的是-i,这样图片会按顺序从第一张,第二张.....依次向下
currentImage.style.zIndex = -i;
}

// 设置计数器count,执行一次点击事件(向左或者向右)count加1
var count = 0;
// 向左的点击事件
butLeft.onclick = function() {
// 从数组头部弹出一个图片元素
var showFirst = imagess.shift();
// 给弹出的这个图片元素设置层级,即 -1000+count,
// 让层级相较其他元素是最小的,数组头部弹出的图片会显示在最底层
showFirst.style.zIndex = - index + count;
// 层级改变完成后再将他push进数组的尾部
imagess.push(showFirst);
// 点击一次加1,不用考虑具体的值,只需要有点击事件加 1
count++;
}
// 向右点击事件
butRight.onclick = function() {
// 从imagess的尾部弹出一个元素,并赋值给showFirst
var showFirst = imagess.pop();
// 设置showFirst的层级为最大,1000+count ,这样他会显示在第一层
showFirst.style.zIndex = index + count;
// 层级改变之后将他在插入数组imagess的头部
imagess.unshift(showFirst);
// 点击一次加1
count++;
}
</script>
</html>

以上这篇js 基础篇必看(点击事件轮播图的简单实现)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js文字滚动停顿效果代码
Jun 28 Javascript
JQuery入门——用bind方法绑定事件处理函数应用介绍
Feb 05 Javascript
详谈JavaScript内存泄漏
Nov 14 Javascript
用JavaScript实现PHP的urlencode与urldecode函数
Aug 13 Javascript
AngularJS进行性能调优的7个建议
Dec 28 Javascript
jquery.tableSort.js表格排序插件使用方法详解
Aug 12 Javascript
详谈js遍历集合(Array,Map,Set)
Apr 06 Javascript
JavaScript实现获取用户单击body中所有A标签内容的方法
Jun 05 Javascript
vue实现树形菜单效果
Mar 19 Javascript
D3.js实现简洁实用的动态仪表盘的示例
Apr 04 Javascript
详解Vue webapp项目通过HBulider打包原生APP
Jun 29 Javascript
JS 自执行函数原理及用法
Aug 05 Javascript
再谈Javascript中的异步以及如何异步
Aug 19 #Javascript
用原生js统计文本行数的简单示例
Aug 19 #Javascript
jQuery购物网页经典制作案例
Aug 19 #Javascript
手机Web APP如何实现分享多平台功能
Aug 19 #Javascript
浅谈Javascript中的12种DOM节点类型
Aug 19 #Javascript
js实现select选择框效果及美化
Aug 19 #Javascript
JavaScript面向对象编写购物车功能
Aug 19 #Javascript
You might like
转生史莱姆:萌王第一次撸串开心到飞起,哥布塔撸串却神似界王神
2018/11/30 日漫
Smarty中常用变量操作符汇总
2014/10/27 PHP
php自定文件保存session的方法
2014/12/10 PHP
php写入、删除与复制文件的方法
2015/06/20 PHP
PHP实现求连续子数组最大和问题2种解决方法
2017/12/26 PHP
滚动经典最新话题[prototype框架]下编写
2006/10/03 Javascript
脚本之家贴图转换+转贴工具用到的js代码超级推荐
2007/04/05 Javascript
Javascript 检测、添加、移除样式(className)函数代码
2009/09/08 Javascript
基于jquery的15款幻灯片插件
2011/04/10 Javascript
禁用JavaScript控制台调试的方法
2014/03/07 Javascript
自己使用js/jquery写的一个定制对话框控件
2014/05/02 Javascript
浅谈javascript的Touch事件
2015/09/27 Javascript
javascript实现瀑布流加载图片原理
2016/02/02 Javascript
Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)
2016/03/24 Javascript
浅谈js函数的多种定义方法与区别
2016/11/29 Javascript
微信小程序 如何引入外部字体库iconfont的图标
2018/01/31 Javascript
微信小程序拍照和摄像功能实现方法示例
2019/02/01 Javascript
JQueryDOM之样式操作
2019/03/27 jQuery
Js通过AES加密后PHP用Openssl解密的方法
2019/07/12 Javascript
微信小程序常用的3种提示弹窗实现详解
2019/09/19 Javascript
vue实现简单计算商品价格
2020/09/14 Javascript
用Python登录好友QQ空间点赞的示例代码
2017/11/04 Python
通过python实现弹窗广告拦截过程详解
2019/07/10 Python
python实现多线程端口扫描
2019/08/31 Python
Python 操作mysql数据库查询之fetchone(), fetchmany(), fetchall()用法示例
2019/10/17 Python
Python 切分数组实例解析
2019/11/07 Python
Manjaro、pip、conda更换国内源的方法
2020/11/17 Python
CSS3教程:新增加的结构伪类
2009/04/02 HTML / CSS
纯CSS3实现鼠标滑过按钮动画第二节
2020/07/16 HTML / CSS
租租车:国际租车、美国租车、欧洲租车、特价预订国外租车(中文服务)
2018/03/28 全球购物
Fnac西班牙官网:法国文化和电子产品零售商
2021/03/14 全球购物
营销主管自我评价怎么写
2013/09/19 职场文书
高一英语教学反思
2014/01/22 职场文书
英语课外活动总结
2014/08/27 职场文书
解决Mysql多行子查询的使用及空值问题
2022/01/22 MySQL
Python中的matplotlib绘制百分比堆叠柱状图,并为每一个类别设置不同的填充图案
2022/04/20 Python