图片轮播

最新推荐文章于 2023-09-11 21:33:33 发布

指倩画骨

最新推荐文章于 2023-09-11 21:33:33 发布

阅读量807

点赞数

分类专栏：前端文章标签： HTML 前端 js css

欢迎转载，加群学习--490859264

本文链接：https://blog.csdn.net/qq_41879385/article/details/84491043

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

所有代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery无缝轮播插件 - 站长素材</title>

<link rel="stylesheet" href="css/ft-carousel.css" />
<style>
body{margin: 0;font-family: "微软雅黑";background-color: #1F1F1F;}
.example {width: 624px;height: 336px;font-size: 40px;text-align: center;margin: 20px auto;background-color: #464576;}
.carousel-item{line-height: 336px;color: #fff;font-family:  Arial Black}

ul,
ol,
li,
div {
	margin: 0;
	padding: 0;
}

ul,
ol {
	list-style: none;
}

.ft-carousel {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.ft-carousel .carousel-inner {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
}

.ft-carousel .carousel-inner .carousel-item {
	float: left;
	height: 100%;
}

.ft-carousel .carousel-item img {
	width: 100%;
}

.ft-carousel .carousel-indicators {
	position: absolute;
	left: 0;
	bottom: 10px;
	width: 100%;
	text-align: center;
	font-size: 0;
}

.ft-carousel .carousel-indicators span {
	display: inline-block;
	width: 12px;
	height: 12px;
	background-color: #fff;
	margin: 0 4px;
	border-radius: 50%;
	cursor: pointer;
}

.ft-carousel .carousel-indicators span.active {
	background-color: #de3a3a;
}

.ft-carousel .carousel-btn {
	position: absolute;
	top: 50%;
	width: 50px;
	height: 45px;
	margin-top: -25px;
	cursor: pointer;
}

.ft-carousel .carousel-prev-btn {
	left: 0;
	background: url(../img/prev.png) no-repeat;
}

.ft-carousel .carousel-next-btn {
	right: 0;
	background: url(../img/next.png) no-repeat;
}

</style>

</head>
<body>

<div class="example">
	<div class="ft-carousel" id="carousel_1">
		<ul class="carousel-inner">
			<li class="carousel-item"><img src="image/chun.jpg" alt="春"/></li>
			<li class="carousel-item"><img src="image/xia.jpg" alt="夏"/></li>
			<li class="carousel-item"><img src="image/qiu.jpg" alt="秋"/></li>
			<li class="carousel-item"><img src="image/dong.jpg" alt="冬"/></li>
		</ul>
	</div>
</div>

<script src="lunbojs/jquery.min.js"></script>
<script src="lunbojs/ft-carousel.min.js"></script>
<script type="text/javascript">

	$("#carousel_1").FtCarousel({
		index: 0,
		auto: true,
		time: 1500,
		indicators: false,
		buttons: true
	});
</script>
</body>
</html>

图片、js、源码地址：https://pan.baidu.com/s/19gGZsibqbElyZGf0NFS0xg