文档章节

纯js轮播(二)

静水流深01
 静水流深01
发布于 2017/04/26 18:42
字数 548
阅读 7
收藏 0
点赞 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;
			}
			button{
				position: absolute;
				top:50%;
				transform: translateY(-50%);
				font-size: 40px;
				font-weight: 200;
				opacity: 0;
			}
			button.show{
				opacity: .7;
			}
			.btnL{
				left:10px;
			}
			.btnR{
				right:10px;
			}
		</style>
	</head>
	<body>
		<div class="carouselBox" id="carouselBox">
			<img id="carouselImg" src="images/1.jpg" alt="" />
			<ul id="carouselBtn">
				<li class="selected">1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
				<li>6</li>
			</ul>
			<button class="btnL" id="btnL">&lt;</button>
			<button class="btnR" id="btnR">&gt;</button>
		</div>
		<script type="text/javascript">
			//获取轮播盒字元素节点
			var carouselBox = document.getElementById("carouselBox");
			//获取轮播图片节点
			var carouselImg = document.getElementById("carouselImg");
			//获取到所以轮播按钮节点
			var lis = document.getElementsByTagName("li");
			var len = lis.length;
			//左点击按钮
			var btnL = document.getElementById("btnL");
			//右点击按钮
			var btnR = document.getElementById("btnR");
			//定义默认图片
			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

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

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

luyanwei79 ⋅ 04/28 ⋅ 0

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

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

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

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

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

Ewall_ ⋅ 05/30 ⋅ 0

JavaScript函数式编程之深入理解纯函数

纯函数是函数式编程的基础,需要重点理解。 纯函数的概念: 纯函数是这样一种函数,即相同的输入,永远会得到相同的输出,而且没有任何可观察的副作用。 在说明纯函数的概念之前,先讲两个其...

砖用冰西瓜 ⋅ 06/08 ⋅ 0

从JS对象开始,谈一谈“不可变数据”和函数式编程

文章转载自:https://segmentfault.com/a/1190000008780076 作为前端开发者,你会感受到JS中对象(Object)这个概念的强大。我们说“JS中一切皆对象”。最核心的特性,例如从String,到数组,再...

朱先忠老师 ⋅ 05/20 ⋅ 0

TypeScript 2.8.4 发布,微软推出的 JavaScript 超集

TypeScript 2.8.4 发布了,此版本包含一组针对 TypeScript 2.8.3 报告的 bug 的修复,包括: 修复 js 初始化器合并 符号表损坏导致内存使用失控 阻止检查器中的无限 js 符号合并 详情查看 bu...

雨田桑 ⋅ 05/26 ⋅ 0

学java还是javascript好?哪个更有前途?

  对于哪种语言好这种问题,其实并没有固定的答案,最重要的还是 兴趣!兴趣!兴趣!重要的事情说三遍。无论做什么开发,永远要以兴趣来驱动自己学习。 先大致的说一下,Java学习是一个需要...

W3Cschool小编 ⋅ 04/23 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

BS与CS的联系与区别【简】

C/S是Client/Server的缩写。服务器通常采用高性能的PC、工作站或小型机,并采用大型数据库系统,如Oracle、Sybase、InFORMix或 SQL Server。客户端需要安装专用的客户端软件。 B/S是Brower/...

anlve ⋅ 57分钟前 ⋅ 0

发生了什么?Linus 又发怒了?

在一个 Linux 内核 4.18-rc1 的 Pull Request 中,开发者 Andy Shevchenko 表示其在对设备属性框架进行更新时,移除了 union 别名,这引发了 Linus 的暴怒。 这一次 Linus Torvalds 发怒的原...

问题终结者 ⋅ 今天 ⋅ 0

在树莓派上搭建一个maven仓库

在树莓派上搭建一个maven仓库 20180618 lambo init 项目说明 家里有台树莓派性能太慢。想搭建一个maven私服, 使用nexus或者 jfrog-artifactory 运行的够呛。怎么办呢,手写一个吧.所在这个...

林小宝 ⋅ 今天 ⋅ 0

Spring发展历程总结

转自与 https://www.cnblogs.com/RunForLove/p/4641672.html 目前很多公司的架构,从Struts2迁移到了SpringMVC。你有想过为什么不使用Servlet+JSP来构建Java web项目,而是采用SpringMVC呢?...

onedotdot ⋅ 今天 ⋅ 0

Python模块/包/库安装(6种方法)

Python模块/包/库安装(6种方法) 冰颖机器人 2016-11-29 21:33:26 一、方法1: 单文件模块 直接把文件拷贝到 $python_dir/Lib 二、方法2: 多文件模块,带setup.py 下载模块包(压缩文件zip...

cswangyx ⋅ 今天 ⋅ 0

零基础学习大数据人工智能,学习路线篇!系统规划大数据之路?

大数据处理技术怎么学习呢?首先我们要学习Python语言和Linux操作系统,这两个是学习大数据的基础,学习的顺序不分前后。 Python:Python 的排名从去年开始就借助人工智能持续上升,现在它已经...

董黎明 ⋅ 今天 ⋅ 0

openJdk和sun jdk的区别

使用过LINUX的人都应该知道,在大多数LINUX发行版本里,内置或者通过软件源安装JDK的话,都是安装的OpenJDK, 那么到底什么是OpenJDK,它与SUN JDK有什么关系和区别呢? 历史上的原因是,Ope...

jason_kiss ⋅ 今天 ⋅ 0

梳理

Redux 是 JavaScript 状态容器,提供可预测化的状态管理。 它是JS的状态容器,是一种解决问题的方式,所以即可以用于 react 也可以用于 vue。 需要理解其思想及实现方式。 应用中所有的 stat...

分秒 ⋅ 今天 ⋅ 0

Java 后台判断是否为ajax请求

/** * 是否是Ajax请求 * @param request * @return */public static boolean isAjax(ServletRequest request){return "XMLHttpRequest".equalsIgnoreCase(((HttpServletReques......

JavaSon712 ⋅ 今天 ⋅ 0

Redis 单线程 为何却需要事务处理并发问题

Redis是单线程处理,也就是命令会顺序执行。那么为什么会存在并发问题呢? 个人理解是,虽然redis是单线程,但是可以同时有多个客户端访问,每个客户端会有 一个线程。客户端访问之间存在竞争...

码代码的小司机 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部