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 相关文章推荐
为jquery.ui.dialog 增加“在当前鼠标位置打开”的功能
Nov 24 Javascript
前端必备神器 Snap.svg 弹动效果
Nov 10 Javascript
JavaScript数组各种常见用法实例分析
Aug 04 Javascript
Bootstrap入门书籍之(一)排版
Feb 17 Javascript
JS中artdialog弹出框控件之提交表单思路详解
Apr 18 Javascript
详解vuejs之v-for列表渲染
Jun 22 Javascript
Angular客户端请求Rest服务跨域问题的解决方法
Sep 19 Javascript
vue初尝试--项目结构(推荐)
Jan 30 Javascript
解决element ui select下拉框不回显数据问题的解决
Feb 20 Javascript
详解auto-vue-file:一个自动创建vue组件的包
Apr 26 Javascript
vue项目初始化到登录login页面的示例
Oct 31 Javascript
深入了解Vue3模板编译原理
Nov 19 Vue.js
再谈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
PHP读取文件内容后清空文件示例代码
2014/03/18 PHP
php中explode的负数limit用法分析
2015/02/27 PHP
php session的应用详细介绍
2017/03/22 PHP
thinkPHP实现的省市区三级联动功能示例
2017/05/05 PHP
PHP实现登录注册之BootStrap表单功能
2017/09/03 PHP
基于Laravel实现的用户动态模块开发
2017/09/21 PHP
thinkphp5 URL和路由的功能详解与实例
2017/12/26 PHP
PHP使用file_get_contents发送http请求功能简单示例
2018/04/29 PHP
?牟┛途W扣了一??效果出?? target=
2007/05/27 Javascript
一个JS的日期格式化算法示例
2013/07/31 Javascript
Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别
2015/12/30 Javascript
jQuery实现邮箱下拉列表自动补全功能
2016/09/08 Javascript
jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码
2016/12/05 Javascript
jQuery基于Ajax方式提交表单功能示例
2017/02/10 Javascript
vue完成项目后,打包成静态文件的方法
2018/09/03 Javascript
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
2018/10/12 Javascript
详解VUE前端按钮权限控制
2019/04/26 Javascript
jquery实现上传图片功能
2020/06/29 jQuery
js实现数字跳动到指定数字
2020/08/25 Javascript
jQuery实现简单全选框
2020/09/13 jQuery
[01:01:52]完美世界DOTA2联赛PWL S2 GXR vs Magma 第二场 11.25
2020/11/26 DOTA
利用Python中SocketServer 实现客户端与服务器间非阻塞通信
2016/12/15 Python
python+pandas生成指定日期和重采样的方法
2018/04/11 Python
Python网络爬虫之爬取微博热搜
2019/04/18 Python
python实现对象列表根据某个属性排序的方法详解
2019/06/11 Python
在tensorflow中设置使用某一块GPU、多GPU、CPU的操作
2020/02/07 Python
tensorflow 20:搭网络,导出模型,运行模型的实例
2020/05/26 Python
细说CSS3中的选择符
2008/10/17 HTML / CSS
美国药妆网站:EDCskincare.com(防晒、痤疮、抗衰老等)
2017/04/28 全球购物
马耳他航空公司官方网站:Air Malta
2019/05/15 全球购物
学校安全工作制度
2014/01/19 职场文书
吃空饷专项治理工作实施方案
2014/03/04 职场文书
精彩的演讲稿开头
2014/05/08 职场文书
2015年计算机教学工作总结
2015/07/22 职场文书
Html分层的box-shadow效果的示例代码
2021/03/30 HTML / CSS
CSS布局之浮动(float)和定位(position)属性的区别
2021/09/25 HTML / CSS