文档章节

纯js轮播

静水流深01
 静水流深01
发布于 2017/04/26 17:49
字数 426
阅读 9
收藏 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>

© 著作权归作者所有

共有 人打赏支持
上一篇: 纯js轮播(二)
下一篇: ionic app基础框架
静水流深01
粉丝 3
博文 15
码字总数 14681
作品 0
信阳
程序员
私信 提问
记一个JavaScript图片轮播思路与代码

说在前头 喜欢并学习前端,一路摸爬滚打过来,现在算算也快满一年的,每天或多或少都会来“拜读”大家的写的文章,学习与感悟了不少,作为一名要变的更强的前端小哥哥,在这个节点上,也想写...

柚子先生
08/06
0
0
最近排查android webview https的发热耗电和加载速度慢问题解决

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

ljianbing
05/28
0
0
bootstrap常用功能快速入门以及常见问题解决方案

1、图片轮播: 官网上的代码已经给的很清楚了,但是经常会出现问题。要做的很简单,首先引入jquery和bootstrap文件,再将官网上的html代码加上,最后加上一行js代码$('.carousel').carsouse...

fareise
2015/08/31
0
0
手把手教你封装JavaScript插件

我们可能已经用过很多JS插件,比如著名的轮播图插件Swiper.js,滚动条插件iScroll.js等等,用起来非常方便,大大提高了我们的工作效率。那么它们基本实现原理是怎样的呢?我们又该如何DIY一个...

前端王睿
08/29
0
0
Bootstrap 响应式项目分享一

网页链接地址:http://chem960.vicp.cc:9128 该页面中主要用到的有 1. 全局 CSS 样式 -- 栅格系统 2. 全局 CSS 样式 -- 按钮 3. 全局 CSS 样式 -- 辅助类 4. 组件 -- 按钮式下拉菜单 5. 组件...

Neuro_annie
2017/12/27
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Apache日志不记录访问静态文件,访问日志切割,静态元素过期时间设置

Apache配置不记录访问静态文件的日志 网站大多元素为静态文件,如图片、css、js等,这些元素可以不用记录 vhost原始配置 <VirtualHost *:80> ServerAdmin test@163.com DocumentRoo...

野雪球
今天
1
0
聊聊storm的ICommitterTridentSpout

序 本文主要研究一下storm的ICommitterTridentSpout ICommitterTridentSpout storm-core-1.2.2-sources.jar!/org/apache/storm/trident/spout/ICommitterTridentSpout.java public interface......

go4it
今天
2
0
Ubuntu常用操作

查看端口号 netstat -anp |grep 端口号 查看已使用端口情况 netstat -nultp(此处不用加端口号) netstat -anp |grep 82查看82端口的使用情况 查找被占用的端口: netstat -tln netstat -tl...

hc321
昨天
1
0
网站cdn的静态资源突然访问变的缓慢,问题排查流程

1.首先我查看了一下是否自己的网络问题,通过对比其他资源的访问速度和下载速度,确认不是 2.通过ping 和 tracert 判断cdn域名能否正常访问,(最后回想感觉这一步可以省略,因为每次最终能访...

小海bug
昨天
3
0
Mybatis 学习笔记四 MyBatis-Plus插件

Mybatis 学习笔记四 MyBatis-Plus插件 maven依赖 <dependency> <groupId>com.baomidou</groupId> <artifactId>mybatis-plus</artifactId> <ve......

晨猫
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部