22-(JQuery动画)简易轮播图

最新推荐文章于 2024-09-02 17:34:07 发布

七色的天空

最新推荐文章于 2024-09-02 17:34:07 发布

阅读量29

点赞数

分类专栏： 05_JQuery 文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/q506174602/article/details/133834120

版权

05_JQuery 专栏收录该内容

51 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		li{
			list-style: none;
		}
		.slider{
			width: 790px;
			height: 340px;
			margin: 50px auto 0;
			position: relative;
		}
		.slider li{
			position: absolute;
			display: none;
		}
		.slider li:first-child{
			display: block;
		}
		.arrow_left,.arrow_right{
			position: absolute;
			top: 50%;
			width: 30px;
			height: 60px;
			margin-top: -30px;
			text-align: center;
			line-height: 60px;
			font-family: "宋体";
			font-weight: 700;
			color: #fff;
			font-size: 30px;
			background-color: rgba(0,0,0,.2);
		}
		.arrow_left:hover,.arrow_right:hover{
			background-color: rgba(0,0,0,.5);
		}
		.arrow_left{
			left: 0;
		}
		.arrow_right{
			right: 0;
		}
	</style>
</head>
<body>
	<div class="slider">
		<ul>
			<li><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="../images/4.jpg" alt=""></li>
			<li><img src="../images/5.jpg" alt=""></li>
			<li><img src="../images/6.jpg" alt=""></li>
			<li><img src="../images/7.jpg" alt=""></li>
			<li><img src="../images/8.jpg" alt=""></li>
		</ul>
		<div class="arrow">
			<span class="arrow_left"><</span>
			<span class="arrow_right">></span>
		</div>
	</div>
	<script type="text/javascript" src="../jquery-3.2.1.js"></script>
	<script type="text/javascript">
		$(function() {
			var index = 0;
			$(".arrow_right").click(function () {
				index++; 
				if(index == $(".slider li").length){
					//如果在最后一张图片上再点击右箭头,则回到第1张
					index = 0;
				}
				$(".slider li").eq(index).fadeIn().siblings().fadeOut();
			})
			$(".arrow_left").click(function () {
				index--; 
				if(index == -1){
					//如果在第一张图片上再点击左箭头,则回到最后一张
					index = $(".slider li").length-1;
				}
				$(".slider li").eq(index).fadeIn().siblings().fadeOut();
			})
		})
	</script>
</body>
</html>

上述运行结果：