分享一个自己常用的jQuery轮播插件

css:


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;
}

html:


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></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}
		</style>
	</head>
	<body>
		<div class="example">
			<div class="ft-carousel" id="carousel">
				<ul class="carousel-inner">
					<li class="carousel-item"><img src="./img/a1.png" /></li>
					<li class="carousel-item"><img src="./img/a2.png" /></li>
					<li class="carousel-item"><img src="./img/a3.png" /></li>
					<li class="carousel-item"><img src="./img/a4.png" /></li>
					<li class="carousel-item"><img src="./img/a5.png" /></li>
					<li class="carousel-item"><img src="./img/a6.png" /></li>
				</ul>
			</div>
		</div>
		<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
		<script src="js/ft-carousel.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$("#carousel").FtCarousel({
				index: 0,
				auto: true,
				time: 3000,
				indicators: false,
				buttons: true
			});
		</script>
	</body>
</html>

js:略

成品:

[btn-download]下载按钮[/btn-download]

转载请注明来源:开发猿 » 分享一个自己常用的jQuery轮播插件

赞 (1) 打赏

觉得文章有用就打赏一下哦

支付宝扫一扫打赏

微信扫一扫打赏