前端知识之图片轮播实例

最新推荐文章于 2024-07-18 10:05:33 发布

圆角50%

最新推荐文章于 2024-07-18 10:05:33 发布

阅读量344

点赞数

分类专栏：学习笔记 jQuery 文章标签：前端 jQuery

本文链接：https://blog.csdn.net/JY185445/article/details/85111084

版权

学习笔记同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

jQuery

1 篇文章 0 订阅

订阅专栏

JQuery实现轮播图

困到不行了，细节部分明天再调。。。no 天亮再调。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Jquery实现轮播图</title>
	
	<style>
	html,body{
		height:100%;
	}
	*{
		
		margin:0;
	}
	.box{
		position: relative;
		overflow: hidden;
		width: 100%;
		height:700px;
	}
	.img-box{
		position: relative;
		display:inline;
		float:left;
		width:100%;
		height:100%;
	}
	img{
		width:100%;
		height: 100%;
	}
	.text{
		position: absolute;
		bottom:0;
		left: 0;
		width: 100%;
		padding:2% 3%;
		color: #fff;
		font-size: 45px;
		background: rgba(0,0,0,.5);
	}
	.icon{
		position: absolute;
		bottom:3%;
		right: 0;
		width: 30%;
		height: 40px;
		line-height:40px;
		text-align: center;
	}
	.dio{
		display:inline-block;
		width: 25px;
		height: 25px;
		background: #fff;
		border-radius: 50%;
		z-index: 2;
	}
	.on{
		background: #ccc;
	}
</style>
</head>
<body>

	<div class="box">
			<div class="img-box">
				<img src="images/baobao.jpg" alt="">
				<p class="text">冯宝宝</p>
			</div>
			<div class="img-box">
				<img src="images/Black Widow.jpg" alt="">
				<p class="text">黑寡妇</p>
			</div>
			<div class="img-box">
				<img src="images/Captain America.jpg" alt="">
				<p class="text">美国队长</p>
			</div>
			<div class="img-box">
				<img src="images/Hawkeye.jpg" alt="">
				<p class="text">鹰眼</p>
			</div>
			<div class="img-box">
				<img src="images/Tai Chi.jpg" alt="">
				<p class="text">阵法图</p>
			</div>
	<div class="icon">
		<span class="dio"></span>
		<span class="dio"></span>
		<span class="dio"></span>
		<span class="dio"></span>
		<span class="dio"></span>
	</div>
	</div>
</body>
</html>
<script src="js/jquery-1.8.3.js"></script>
<script>
	var index=0;
	var mg=$('.box .img-box');
	var li=$('.dio');
	var len=mg.length;
	function play(n){
		mg.eq(n).fadeIn(200).siblings('.img-box').fadeOut(200);
	li.eq(n).addClass('on').siblings('.dio').removeClass('on');

	}
	setInterval(function(){
		play(index);
		index++;
		if(index==len){
			index=0;
		}
	},2000);
</script>