图片轮播效果

最新推荐文章于 2024-06-03 08:37:43 发布

小王正在学习中

最新推荐文章于 2024-06-03 08:37:43 发布

阅读量505

点赞数

分类专栏：页面功能实现文章标签： html5 前端

本文链接：https://blog.csdn.net/qq_17846583/article/details/50561671

版权

页面功能实现专栏收录该内容

1 篇文章 0 订阅

订阅专栏

效果如附件（图片资源来自讯飞开发者论坛bbs.xfyun.cn），代码资源来自网易云课堂HTML5前端开发实战http://study.163.com/course/courseMain.htm?courseId=717031

思路：按钮和图片建立对应关系，显示一张图片，其他图片隐藏

结构层

ul放图片，第一张是显示的，ol放按钮

<body>
	<div id="box">
		<ul>
			<li style="display:block"><img src="images/1.jpg" alt=""/></li>
			<li><img src="images/2.jpg" alt=""/></li>
			<li><img src="images/3.jpg" alt=""/></li>
			<li><img src=" " alt=""/></li>
			<li><img src=" " alt=""/></li>
		</ul>
		<ol>
			<li class="active">1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ol>
	</div>
</body>

表示层

<style type="">
	img{
		border: none;
		/*vertical-align:【定义和用法】设置元素的垂直对齐方式
		                        【说明】定义行内元素的基线/所在行的基线/的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式*/
		vertical-align: top;
	}
	#box{
		width: 685px;
		height: 275px;
		position: relative;
		margin: 30px auto;
		/*overflow:【定义和用法】规定当内容溢出元素框时发生的事情
		                  【说明】定义溢出元素内容区的内容会如何处理。如果值为scroll，不论是否需要，用户代理都会提供一种滚动机制。因此有可能即使元素框中可以放下所有内容也会出现滚动条【可能的值】visible hidden scroll auto inhert*/
		overflow: hidden;   
	}
	ul{
		width: 685px;
		position: absolute;
		left: 0px;
		top: 0px;
		/*z-index:【定义和用法】设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面【说明】设置的是一个定位元素沿着Z轴的位置，Z轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远【可能的值】auto number inherit*/
		z-index: 1;
	}
	ul li{
		width: 685px;
		display: none;
	}
	ol{
		z-index: 2;
		width: 120px;
		position: absolute;
		right: 10px;
		bottom: 10px;
	}
	ol li{
		width: 20px;
		height: 20px;
		float: left;
		margin: 0 2px;
		display: inline;
		background: #fff;
		color: #f60;
		/*line-height:【定义和用法】设置行间的距离行高
		                    【说明】会影响行框的布局，在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离
		                    【可能的值】normal number length % inherit*/
		line-height: 20px;
		/*text-align:【定义和用法】规定元素中的文本的水平对齐方式*/
		text-align: center;
	}
	ol .active{
		background: #f60;
		color: #fff;
	}
	</style>

行为层

用一个循环实现按钮转换的功能

<script>
	window.onload = function () {
		// 变量定义
		var  oUl = document.getElementsByTagName('ul')[0] ;
		var aLiUl = oUl.getElementsByTagName('li');

		var  oOl = document.getElementsByTagName('ol')[0] ;
		var aLiOl = oOl.getElementsByTagName('li');

		// 按钮的切换
		for (var i =0 ; i < aLiOl.length ; i++) {
			// 为按钮和图片对应一个数量关系，加索引
			aLiOl[i].index = i ;
			aLiOl[i].onmouseover = function() {
				for (var i =0 ; i < aLiOl.length ; i++) {
					// 之前的按钮效果全部撤销
					aLiOl[i].className = ' ' ;
					// 之前的图片全部隐藏
					aLiUl[i].style.display = 'none' ;
				}
				this.className = 'active' ;
				// 对应索引值的图片显示出来
				aLiUl[this.index].style.display = 'block' ;
			}	
		};

		// 图片的对应

	}

	</script>

全部代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta content="">
	<title>图片轮播效果</title>

	<style type="">
	img{
		border: none;
		/*vertical-align:【定义和用法】设置元素的垂直对齐方式
		                        【说明】定义行内元素的基线/所在行的基线/的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式*/
		vertical-align: top;
	}
	#box{
		width: 685px;
		height: 275px;
		position: relative;
		margin: 30px auto;
		/*overflow:【定义和用法】规定当内容溢出元素框时发生的事情
		                  【说明】定义溢出元素内容区的内容会如何处理。如果值为scroll，不论是否需要，用户代理都会提供一种滚动机制。因此有可能即使元素框中可以放下所有内容也会出现滚动条【可能的值】visible hidden scroll auto inhert*/
		overflow: hidden;   
	}
	ul{
		width: 685px;
		position: absolute;
		left: 0px;
		top: 0px;
		/*z-index:【定义和用法】设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面【说明】设置的是一个定位元素沿着Z轴的位置，Z轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远【可能的值】auto number inherit*/
		z-index: 1;
	}
	ul li{
		width: 685px;
		display: none;
	}
	ol{
		z-index: 2;
		width: 120px;
		position: absolute;
		right: 10px;
		bottom: 10px;
	}
	ol li{
		width: 20px;
		height: 20px;
		float: left;
		margin: 0 2px;
		display: inline;
		background: #fff;
		color: #f60;
		/*line-height:【定义和用法】设置行间的距离行高
		                    【说明】会影响行框的布局，在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离
		                    【可能的值】normal number length % inherit*/
		line-height: 20px;
		/*text-align:【定义和用法】规定元素中的文本的水平对齐方式*/
		text-align: center;
	}
	ol .active{
		background: #f60;
		color: #fff;
	}
	</style>

	<script>
	window.onload = function () {
		// 变量定义
		var  oUl = document.getElementsByTagName('ul')[0] ;
		var aLiUl = oUl.getElementsByTagName('li');

		var  oOl = document.getElementsByTagName('ol')[0] ;
		var aLiOl = oOl.getElementsByTagName('li');

		// 按钮的切换
		for (var i =0 ; i < aLiOl.length ; i++) {
			// 为按钮和图片对应一个数量关系，加索引
			aLiOl[i].index = i ;
			aLiOl[i].onmouseover = function() {
				for (var i =0 ; i < aLiOl.length ; i++) {
					// 之前的按钮效果全部撤销
					aLiOl[i].className = ' ' ;
					// 之前的图片全部隐藏
					aLiUl[i].style.display = 'none' ;
				}
				this.className = 'active' ;
				// 对应索引值的图片显示出来
				aLiUl[this.index].style.display = 'block' ;
			}	
		};

		// 图片的对应

	}

	</script>

</head>
<body>
	<div id="box">
		<ul>
			<li style="display:block"><img src="images/1.jpg" alt=""/></li>
			<li><img src="images/2.jpg" alt=""/></li>
			<li><img src="images/3.jpg" alt=""/></li>
			<li><img src=" " alt=""/></li>
			<li><img src=" " alt=""/></li>
		</ul>
		<ol>
			<li class="active">1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ol>
	</div>
</body>
</html>

小王正在学习中

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
3
评论
图片轮播效果

效果如下图（图片资源来自讯飞开发者论坛bbs.xfyun.cn），代码资源来自网易云课堂HTML5前端开发实战http://study.163.com/course/courseMain.htm?courseId=717031结构层ul放图片，第一张是显示的，ol放按钮 1 2
复制链接

扫一扫