文档章节

纯js轮播

静水流深01
 静水流深01
发布于 2017/04/26 17:49
字数 426
阅读 9
收藏 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;
				right: 20px;
				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;
			}
		</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>
		</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 autoImg = 1;
			//定时器
			var time = 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].classList = "selected";
					} else{
						lis[i].classList = "normal";
					}
				}
			}
			
			//点击轮播
			function clickCarousel () {
				for (var i = 0; i < len; i++) {
					lis[i].onclick = function () {
						var 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);
			}
			//鼠标移出继续轮播
			carouselBox.onmouseleave = function () {
				autoCarousel();
			}
		</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

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

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

沉睡的名侦探 ⋅ 06/19 ⋅ 0

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

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

Ewall_ ⋅ 05/30 ⋅ 0

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

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

朱先忠老师 ⋅ 05/20 ⋅ 0

一个女生对BootStrap的感情

首先说明一下,姐我不是很聪明,但是也做设计,也做前端,同时在移动互联网行业中也混了多年,感触颇多,打算开始记录一下脚步,希望对后来的小弟弟×××们有那么一点帮助,也算一件高兴的事...

BootStrap之路 ⋅ 04/25 ⋅ 0

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

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

雨田桑 ⋅ 05/26 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

SAS笔记-宏2

宏是一种文本,一般来说其编译是在程序执行之前。 宏变量的创建 %let语句 %let macro_variables = text; %let是常见的宏变量建立方式,其编译就在执行前。如下例中,想要宏变量test等于数据集...

tonorth123 ⋅ 11分钟前 ⋅ 0

如何使用serverchan微信推送告警

之前实现推送告警信息到微信的方法有如下几种: 1、通过企业公众号实现----收费: 2、通过QQ邮箱,在微信平台上开启收到邮件进行提醒; 3、第三方告警平台API,一般也是收费的; 不过最近看文...

问题终结者 ⋅ 37分钟前 ⋅ 0

TCP的RPC

RPC就是远程方法调用(Remote Process Call ),包含了客户端和服务端,涉及了对象的序列化传输。 1.服务端启动,注册远程调用的类2.客户端发送请求信息包含类、方法、参数的一些信息、序列化传...

Cobbage ⋅ 58分钟前 ⋅ 0

IOS-UI UI初步代码布局添加事件

ISO开发界面,UI是必须学习的一部分,其实很早之前想学来了,一直没有沉下心来学习。看到IOS的代码风格和布局就别扭的不行,跟java代码和android布局比较显得不是那么方便,所以一直到现在。...

京一 ⋅ 今天 ⋅ 0

浅谈OpenDaylight的二次开发

OpenDaylight作为一款开源SDN网络控制器,依托于强大的社区支持以及功能特性,成为了目前主流的SDN网络控制器开发平台。在比较稳定的OpenDaylight Helium版本中,已经为开发者提供了大量的网...

wangxuwei ⋅ 今天 ⋅ 0

API 开发中可选择传递 token 接口遇到的一个坑

在做 API 开发时,不可避免会涉及到登录验证,我使用的是jwt-auth 在登录中会经常遇到一个token过期的问题,在config/jwt.php默认设置中,这个过期时间是一个小时,不过为了安全也可以设置更...

等月人 ⋅ 今天 ⋅ 0

Java NIO之文件处理

程序要操作本地操作系统的一个文件,可以分为以下三个部分: 对文件位置的操作 对文件的操作 对文件内容的操作 其中,对文件内容的操作在 Java NIO之Channel 中已经有了介绍,通过FileChann...

士别三日 ⋅ 今天 ⋅ 0

Maven的pom.xml配置文件详解

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.......

小海bug ⋅ 今天 ⋅ 0

解决httpclient超时设置不生效的问题

最近公司有项目需要通过http调用第三方服务,且第三方服务偶有超时,故需要设置一定的超时时间防止不响应的情况出现。 初始设置如下: [java] view plain copy //超时设置 RequestConfig re...

Mr_Tea伯奕 ⋅ 今天 ⋅ 0

过滤器Filter和拦截器HandlerInterceptor

过滤器 依赖于servlet容器。在实现上基于函数回调,可以对几乎所有请求进行过滤,但是缺点是一个过滤器实例只能在容器初始化时调用一次。使用过滤器的目的是用来做一些过滤操作,获取我们想要...

hutaishi ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部