效果图

html界面：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
        <!-- 引入的css代码 -->
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<!-- 引入的js代码 -->
		<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="flash">
			<!-- 图片 -->
			<ul id="img">
				<!-- 显示第一张   alt 小标题的提示效果-->
				<li style="display: block;"><a href="#"><img src="img/1.jpg" alt="图片"></a></li>
				<li><a href="#"><img src="img/2.jpg" ></a></li>
				<li><a href="#"><img src="img/3.jpg" ></a></li>
				<li><a href="#"><img src="img/4.jpg" ></a></li>
				<li><a href="#"><img src="img/5.jpg" ></a></li>
			</ul>
			<!-- 计数器 -->
			<ul id="num">
				<!-- 点击链接 不刷新 清除默认效果 -->
				<!-- javascript:; 伪协议 为了超链接不跳转 清除默认效果 -->
				<li class="active"><a href="javascript:;">1</a></li>
				<li><a href="javascript:;">2</a></li>
				<li><a href="javascript:;">3</a></li>
				<li><a href="javascript:;">4</a></li>
				<li><a href="javascript:;">5</a></li>
			</ul>
			<!-- 左右箭头 -->
			<a href="javascript:;" id="left" class="arrow">&lt;</a>
			<a href="javascript:;" id="right" class="arrow">&gt;</a>
		</div>
	</body>
</html>

css界面：

这里遇到的困难主要是怎么让下面的计数器和左右的箭头显示在最上面

主要是通过定位设置我们可以将父元素设置成绝对定位想要实现的元素设置成相对定位再用 z-index 层级设置成最大的就可以实现 图片上叠图片 也可以这样实现 top left right bottom 可以调位置

我们将图片进行插入后会发现图片会全部显示

我们可以通过 display：none 隐藏全部的照片将第一的图片设置成 display：block 显示第一张就可以达到图片效果

*{
	margin: 0;
	padding: 0;
}

ul li{
	list-style: none;
}

a{
	text-decoration: none;
	color:rgb(255,255,255);
}

#flash{
	width: 500px;
	height: 310px;
	margin: 10px auto;
	/* 生成绝对定位 */
	position: relative;
}

#img img{
	width: 100%;
}

#img li{
	/* 相对定位 */
	position: absolute;
	top:0px;
	left: 0;
	/* 显示第一张 */
	display: none;
}

#num{
	/* 定位元素  将数字浮到上面 必须得设置定位元素*/
	position: absolute;
	bottom: 5px;
	left: 180px;
	z-index: 1; 
}

#num li{
	display: inline-block;
	width: 20px;
	height: 20px;
	border-radius: 50% 50%;
	background-color: rgb(102,102,102);
	text-align: center;
	line-height: 20px;
}

.arrow{
	position: absolute;
	top: 125px;
	/* 设置层级 最上层 可以显出 */
	z-index: 2;
	font-size: 40px;
	/* 不悬浮不显示 */
	display: none;
}

#left{
	left: 5px;
}

#right{
	right: 5px;
}
/* 鼠标悬停在区域内 箭头显示 */
#flash:hover .arrow{
	display: block;
}

.arrow:hover{
	background-color: rgba(0,0,0,.5);
}
/* 当前照片对应的下面小球的数字 */
#num .active{
	background-color: rgb(255,0,0);
}

js部分：

window.onload = function() {
				//轮播的次数
				var index = 0;
				//定义计时器对象
				var timer = null;
				//获取所有的li图片元素
				var pic = document.getElementById("pic").getElementsByTagName("li");
				var num =
					document.getElementById("num").getElementsByTagName("li");
				var flash = document.getElementById("flash");
				//获取控制方向的箭头元素
				var left = document.getElementById("left");
				var right = document.getElementById("right");
				//定义计时器
				timer = setInterval(run, 2000);
				//封装函数run 
				function run() {
					index++;
					if (index >= num.length) {
						index = 0
					};
					changeOption(index);
				}
				//单击左箭头
				left.onclick = function() {
					index--;
					if (index < 0) {
						index = num.length - 1
					};
					changeOption(index);
				}
				//单击右箭头
				right.onclick = function() {
					index++;
					if (index >= num.length) {
						index = 0
					};
					changeOption(index);
				}
				//鼠标划在窗口上面,停止计时器
				flash.onmouseover = function() {
					clearInterval(timer);
				} //鼠标离开窗口,开启计时器
				flash.onmouseout = function() {
					timer = setInterval(run, 2000)
				}
				//鼠标划在页签上面,停止计时器,手动切换
				for (var i = 0; i < num.length; i++) {
					num[i].id = i;
					num[i].onmouseover = function() {
						clearInterval(timer);
						changeOption(this.id);
					}
				}
				//封装函数changeOption 
				function changeOption(curindex) {
					for (var j = 0; j < num.length; j++) {
						pic[j].style.display = "none";
						num[j].className = "";
					}
					pic[curindex].style.display = "block";
					num[curindex].className = "active";
					index = curindex;
				}
			}

Js实现图片的轮播

html界面：

css界面：

js部分：

猜你喜欢