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 相关文章推荐
JavaScript XML实现两级级联下拉列表
Nov 10 Javascript
js传中文参数controller里获取参数乱码问题解决方法
Jan 03 Javascript
Jsonp post 跨域方案
Jul 06 Javascript
js实现网站最上边可关闭的浮动广告条代码
Sep 04 Javascript
谈谈Jquery中的children find 的区别有哪些
Oct 19 Javascript
Underscore源码分析
Dec 30 Javascript
详解WordPress开发中get_current_screen()函数的使用
Jan 11 Javascript
jquery form表单获取内容以及绑定数据
Feb 24 Javascript
分分钟玩转Vue.js组件(二)
Mar 01 Javascript
vue实现动态数据绑定
Apr 28 Javascript
Angularjs之ngModel中的值验证绑定方法
Sep 13 Javascript
electron + vue项目实现打印小票功能及实现代码
Nov 25 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
php根据某字段对多维数组进行排序的方法
2015/03/07 PHP
laravel dingo API返回自定义错误信息的实例
2019/09/29 PHP
javascript编程起步(第四课)
2007/02/27 Javascript
JavaScript高级程序设计阅读笔记(五) ECMAScript中的运算符(一)
2012/02/27 Javascript
Javascript实现禁止输入中文或英文的例子
2014/12/09 Javascript
浅谈Javascript变量作用域问题
2014/12/16 Javascript
jQuery实现折叠、展开的菜单组效果代码
2015/09/16 Javascript
JavaScript实现倒计时代码段Item1(非常实用)
2015/11/03 Javascript
jquery验证邮箱格式是否正确实例讲解
2015/11/16 Javascript
Bootstrap每天必学之导航条(二)
2016/03/01 Javascript
BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)
2016/07/07 Javascript
Javascript 调用 ActionScript 的简单方法
2016/09/22 Javascript
js学习笔记之事件处理模型
2016/10/31 Javascript
JS实现的系统调色板完整实例
2016/12/21 Javascript
jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法
2017/03/03 Javascript
Angular自定义组件实现数据双向数据绑定的实例
2017/12/11 Javascript
使用Vue自定义指令实现Select组件
2018/05/24 Javascript
Vue slot用法(小结)
2018/10/22 Javascript
Python实现的在特定目录下导入模块功能分析
2019/02/11 Python
通过python实现弹窗广告拦截过程详解
2019/07/10 Python
通过python改变图片特定区域的颜色详解
2019/07/15 Python
如何在Cloud Studio上执行Python代码?
2019/08/09 Python
Python安装与卸载流程详细步骤(图解)
2020/02/20 Python
基于Python计算圆周率pi代码实例
2020/03/25 Python
Django中FilePathField字段的用法
2020/05/21 Python
为什么说python更适合树莓派编程
2020/07/20 Python
Expedia印度尼西亚站:预订酒店、廉价航班和度假套餐
2018/01/31 全球购物
总经理助理的职责
2014/03/14 职场文书
企业元宵节主持词
2014/03/25 职场文书
大学生考试作弊检讨书1000字
2014/10/14 职场文书
2014高三学生考试作弊检讨书
2014/12/14 职场文书
先进个人申报材料
2014/12/30 职场文书
写给女朋友的检讨书
2015/05/06 职场文书
入党积极分子培养联系人意见
2015/08/12 职场文书
2016应届毕业生实习评语
2015/12/01 职场文书
使用css样式设计一个简单的html登陆界面的实现
2021/03/30 HTML / CSS