文档章节

纯js 轮播的封装

静水流深01
 静水流深01
发布于 2017/04/26 19:00
字数 567
阅读 57
收藏 1
点赞 0
评论 0
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body,
			ul,
			li {
				padding: 0;
				margin: 0;
			}
			
			.carouselBox {
				width: 512px;
				height: 384px;
				border: 3px solid black;
				margin: 0 auto;
				position: relative;
			}
			
			.carouselBox ul {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				bottom: 10px;
				z-index: 2;
				overflow: hidden;
			}
			
			.carouselBox ul li {
				list-style: none;
				cursor: pointer;
				-moz-user-select: none;
				user-select: none;
				width: 18px;
				height: 18px;
				font-size: 14px;
				line-height: 18px;
				text-align: center;
				background: #ccc;
				float: left;
				margin: 2px;
			}
			
			.carouselBox ul li.selected {
				background: orange;
			}
			
			.carouselBox ul li.normal {
				background: #ccc;
			}
			
			.carouselBox button {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				font-size: 40px;
				font-weight: 200;
				opacity: 0;
			}
			
			.carouselBox button.show {
				opacity: .7;
			}
			
			.carouselBox .btnL {
				left: 10px;
			}
			
			.carouselBox .btnR {
				right: 10px;
			}
		</style>
	</head>

	<body>
		<div class="carouselBox" id="carouselBox">
			<img class="carouselImg" src="images/1.jpg" alt="" />
			<ul>
				<li class="selected">1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
				<li>6</li>
			</ul>
			<button class="btnL">&lt;</button>
			<button class="btnR">&gt;</button>
		</div>
		<script type="text/javascript">
			//获取轮播盒字元素节点
			var carouselBox = document.getElementById("carouselBox");

			//调用轮播
			carousel(carouselBox);
			//封装轮播
			function carousel(carouselBox) {

				var carouselBox = carouselBox;
				//获取轮播图片节点
				var carouselImg = carouselBox.getElementsByClassName("carouselImg")[0];
				//获取到所以轮播按钮节点
				var lis = carouselBox.getElementsByTagName("li");
				var len = lis.length;
				//左点击按钮
				var btnL = carouselBox.getElementsByClassName("btnL")[0];
				//右点击按钮
				var btnR = carouselBox.getElementsByClassName("btnR")[0];
				//定义默认图片
				var autoImg = 1;
				//定时器
				var time = null;
				//当前li下标值
				var currIndex = null;
				//调用自动轮播
				autoCarousel();
				//调用点击轮播
				clickCarousel();

				//自动轮播
				function autoCarousel() {
					time = setInterval(autoChange, 1000);
				}
				//自动切换函数
				function autoChange() {
					//如果是最后一张变成第一张
					if(autoImg == 6) {
						autoImg = 1;
					} else {
						autoImg++;
					}
					carouselImg.src = "images/" + autoImg + ".jpg";

					//对应得按钮背景色改变
					bgChange(autoImg - 1);
				}

				//背景色改变函数
				function bgChange(t) {

					for(var i = 0; i < len; i++) {
						if(i === t) {
							//如果是和当前图片对应得下标的li则改变背景 否则变为正常的
							lis[i].className = "selected";
						} else {
							lis[i].className = "normal";
						}
					}
				}

				//点击轮播
				function clickCarousel() {
					for(var i = 0; i < len; i++) {
						lis[i].onclick = function() {
							currIndex = getIndex(this);
							bgChange(currIndex);
							carouselImg.src = "images/" + (currIndex + 1) + ".jpg";
							autoImg = currIndex;
						}
					}
				}

				//获取到点击li的下标
				function getIndex(t) {
					//定义个标签
					var index = -1;
					for(var i = 0; i < len; i++) {
						//找到当前点击对象 并记录下标值
						if(lis[i] === t) {
							index = i;
							break;
						}
					}
					return index;
				}
				//鼠标移入的时候清楚定时器
				carouselBox.onmouseenter = function() {
					clearTimeout(time);
					btnL.className = "show btnL";
					btnR.className = "show btnR";
				}
				//鼠标移出继续轮播
				carouselBox.onmouseleave = function() {
					autoCarousel();
					btnL.className = "btnL";
					btnR.className = "btnR";
				}
				//左点击按钮事件
				btnL.onclick = function() {
					currIndex = autoImg;
					if(autoImg == 1) {
						autoImg = 6;
					} else {
						autoImg--;
					}
					carouselImg.src = "images/" + autoImg + ".jpg";

					//对应得按钮背景色改变
					bgChange(autoImg - 1);
				}
				//右按钮点击事件
				btnR.onclick = function() {
					currIndex = autoImg;
					autoChange();
				}
			}
		</script>
	</body>

</html>

© 著作权归作者所有

共有 人打赏支持
静水流深01
粉丝 3
博文 15
码字总数 14681
作品 0
信阳
程序员
最近排查android webview https的发热耗电和加载速度慢问题解决

最近排查android webview https的发热耗电和加载速度慢问题 问题:H5页面发热耗电 排查:通过android studio profiler 查看CPU消耗曲线,发现静置情况下webview轮播图波浪式消耗CPU,且峰值高...

ljianbing ⋅ 05/28 ⋅ 0

JavaWeb03-HTML篇笔记(二)

1.1 案例一:使用JS完成图片的轮播的效果:1.1.1 需求: 1.1.2 分析:1.1.2.1 技术分析: 【JS中的Window对象的定时的操作】 设置定时的方法 清除定时的方法 1.1.2.2 步骤分析: 【步骤一】创...

我是小谷粒 ⋅ 05/02 ⋅ 0

纯HTML,CSS实现点击图片,显示内容

之前实现过用纯js实现轮播图切换,以及点击图片显示相关介绍信息,现在用纯HTML,CSS实现一个小功能,这个是跟一个美国朋友学到,非常厉害的一个前端发开程序员。也是他给的我这个思路。 1....

Mrs_CoCo ⋅ 06/03 ⋅ 0

教你在七天内无框架快速系统搭建小程序--喜马拉雅

这是一个不需要花哨、夸张、修饰的纯输出文章... 很多新手都喜欢一个人完成项目,从项目的规划、搭建,到实施、debug、验收,一整套流程都是自己纯手完成,当然,对于提高自己的整体开发能力...

沉睡的名侦探 ⋅ 前天 ⋅ 0

React 轮播图之二菜单栏左右滑动特效(swiper.js)

之前也写了react中的轮播图,用的是react-swipe 现在用的是在react中导入swiper.js来实现菜单栏左右滑动特效。话不多说,还是上代码: 注意:在react中一定要记得导入swiper.min.css。impor...

luyanwei79 ⋅ 04/28 ⋅ 0

618快要来临--家具大战一战即发

前言 今年是小程序很火的一年,所以最近在自学微信小程序,所以打算自己撸一个小程序出来,由于自己才刚刚自学不久。就做了一个相对简单的家具小程序。当然在这其中也遇到了一些问题和bug,在...

盏茶作酒 流苏如画 ⋅ 06/11 ⋅ 0

面向对象,更适合JavaScript

面向对象程序设计是软件开发中一个很庞大很复杂的话题,它并不是仅仅学会类、继承、封装、多态这些面向对象编程语法元素就表示掌握的,这些语法元素只是实现面向对象程序的工具, 就像砖块、...

陈宏鸿 ⋅ 05/07 ⋅ 0

weex eros框架源码解析

weex eros是基于alibaba weex框架进行二次封装的客户端跨平台开发框架,主要是为前端开发者(可以不用熟悉客户端开发)提供的一站式客户端app开发解决方案。官网地址为:https://bmfe.github...

雅爸学技术 ⋅ 05/27 ⋅ 0

React Native 与原生模块数据通信(一)(iOS)

(一)iOS日历模块封装演示 下面开始演示如何封装一个iOS日历原生模块,让JavaScript可以进行访问到iOS平台日历的功能。 在React Native中,原生模块就是一个Objective-C类,该实现了RCTBridge...

manofit ⋅ 05/24 ⋅ 0

8.轮播图组件及vue-awesome-swiper的引入(手把手教你用vue+node+mongodb搭建一个小商城)

GitHub:https://github.com/Ewall1106/mall 一、新建home.vue 1、上篇我们为了便于展示,把头部组件放在了页面,现在我们删掉里面的头部组件然后我们在view文件里面新建一个页面,然后把头部...

Ewall_ ⋅ 05/30 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

来自一个优秀Java工程师的简历

写在前面: 鉴于前几天的一份前端简历,虽然带着很多不看好的声音,但却帮助了很多正在求职路上的人,不管评论怎么说,我还是决定要贴出一份后端的简历。 XXX ID:357912485 目前正在找工作 ...

颖伙虫 ⋅ 20分钟前 ⋅ 0

Confluence 6 恢复一个站点有关使用站点导出为备份的说明

推荐使用生产备份策略。我们推荐你针对你的生产环境中使用的 Confluence 参考 Production Backup Strategy 页面中的内容进行备份和恢复(这个需要你备份你的数据库和 home 目录)。XML 导出备...

honeymose ⋅ 今天 ⋅ 0

JavaScript零基础入门——(九)JavaScript的函数

JavaScript零基础入门——(九)JavaScript的函数 欢迎回到我们的JavaScript零基础入门,上一节课我们了解了有关JS中数组的相关知识点,不知道大家有没有自己去敲一敲,消化一下?这一节课,...

JandenMa ⋅ 今天 ⋅ 0

火狐浏览器各版本下载及插件httprequest

各版本下载地址:http://ftp.mozilla.org/pub/mozilla.org//firefox/releases/ httprequest插件截至57版本可用

xiaoge2016 ⋅ 今天 ⋅ 0

Docker系列教程28-实战:使用Docker Compose运行ELK

原文:http://www.itmuch.com/docker/28-docker-compose-in-action-elk/,转载请说明出处。 ElasticSearch【存储】 Logtash【日志聚合器】 Kibana【界面】 答案: version: '2'services: ...

周立_ITMuch ⋅ 今天 ⋅ 0

使用快嘉sdkg极速搭建接口模拟系统

在具体项目研发过程中,一旦前后端双方约定好接口,前端和app同事就会希望后台同事可以尽快提供可供对接的接口方便调试,而对后台同事来说定好接口还仅是个开始、设计流程,实现业务逻辑,编...

fastjrun ⋅ 今天 ⋅ 0

PXE/KickStart 无人值守安装

导言 作为中小公司的运维,经常会遇到一些机械式的重复工作,例如:有时公司同时上线几十甚至上百台服务器,而且需要我们在短时间内完成系统安装。 常规的办法有什么? 光盘安装系统 ===> 一...

kangvcar ⋅ 昨天 ⋅ 0

使用Puppeteer撸一个爬虫

Puppeteer是什么 puppeteer是谷歌chrome团队官方开发的一个无界面(Headless)chrome工具。Chrome Headless将成为web应用自动化测试的行业标杆。所以我们很有必要来了解一下它。所谓的无头浏...

小草先森 ⋅ 昨天 ⋅ 0

Java Done Right

* 表示难度较大或理论性较强。 ** 表示难度更大或理论性更强。 【Java语言本身】 基础语法,面向对象,顺序编程,并发编程,网络编程,泛型,注解,lambda(Java8),module(Java9),var(...

风华神使 ⋅ 昨天 ⋅ 0

Linux系统日志

linux 系统日志 /var/log/messages /etc/logrotate.conf 日志切割配置文件 https://my.oschina.net/u/2000675/blog/908189 logrotate 使用详解 dmesg 命令 /var/log/dmesg 日志 last命令,调......

Linux学习笔记 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部