当前位置：首页 > news >正文

基于jQuery轮播carousel.js（轻量化-企业级）

news 来源：原创 2024/5/19 7:44:39

概要

轮播（走马灯）在网站开发中几乎是必不可少的，网上也有许多的相关插件，比如说swiper就是一个很大型的轮播插件，还有许多UI框架中也是封装了自己的swiper。

在做开发的时候，有时候考虑到网站的性能优化，可能不想去引入第三方的插件，不是说第三方插件不好，而是第三方插件就是太好了，功能太齐全，同时增加了代码的重量。所以在大型jQuery项目中，可以使用自己封装的更轻量插件，这样保证质量的同时，还能保证加载更快。

基于jQuery超轻量轮播carousel.js，就具有满足大型项目、轻量等特点。

carousel.js的git下载地址：https://gitee.com/my_dear_li_pan/carousel_light_20220225.git

注意：下载地址中包括完整的使用案例，可以下载直接运行使用。

结果展示

使用说明

引入jQuery
引入carousel.js
直接调用
使用案例可直接拷贝下来使用，注意引入插件的路径是否正确。

<script src="plgin/jquery/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="utils/carousel.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	util_carousel({
		items: '.carousel ul.list li',
		indicators: '.carousel ol.indicators li a',
		prev: '.carousel a.control-prev',
		next: '.carousel a.control-next',
		delay: 5000,
		auto: false
	})
</script>

名称	类型	是否必填	默认值	可选值	说明
items	String	是	-		轮播的对象
indicators	String	否	-	-	轮播指示器对象
prev	String	否	-	-	切换（左）
next	String	否	-	-	切换（右）
delay	Number	否	3000（毫秒）	-	播放的时间
auto	Boolean	否	true	true/false	是否自动播放

使用案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>轻量轮播</title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}

			.carousel {
				position: relative;
				width: 100%;
				height: 400px;
			}

			.carousel ol.indicators {
				position: absolute;
				bottom: 25px;
				left: 50%;
				z-index: 15;
				width: 60%;
				margin-left: -30%;
				padding-left: 0;
				list-style: none;
				text-align: center;
			}

			.carousel ol.indicators li {
				display: inline-block;
				_zoom: 1;
				*display: inline;
				padding: 0 4px;
			}

			.carousel ol.indicators li a {
				display: inline-block;
				width: 10px;
				height: 10px;
				border-radius: 5px;
				background-color: rgba(0, 0, 0, .3);
			}

			.carousel ol.indicators li a.active {
				width: 16px;
				background-color: #FFFFFF;
			}

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

			.carousel .inner ul.list {
				position: absolute;
				width: 100%;
				height: 100%;
				overflow: hidden;
			}

			.carousel .inner ul.list li {
				display: none;
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}

			.carousel .inner ul.list li.active {
				display: block;
			}

			.carousel .inner ul.list li>a {
				display: block;
				width: 100%;
				height: 100%;
				text-align: center;
			}

			.carousel .inner ul.list li>a>img {
				height: 100%;
			}

			.carousel a.control-prev,
			.carousel a.control-next {
				display: none;
				position: absolute;
				top: 160px;
				width: 30px;
				height: 50px;
				opacity: 0.8;
				filter: alpha(opacity=80);
				border-radius: 2px;
			}

			.carousel a.control-prev {
				left: 20px;
				background: rgba(0, 0, 0, .2) url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAMAAACelLz8AAAAPFBMVEUAAADYSWgTAAAAE3RSTlMAVUHaf0337+ihkmo4MeKGdl4rP/m6CwAAAERJREFUKM/l0ikSACEMBdGEYdh37n9XJOqnCixtn206iTWUyc+LgkLj84TKogVoqQjmKjTlNDbbBIvQfiNZxzb5YrbdAr8CAhFr2gYnAAAAAElFTkSuQmCC) no-repeat center center;
			}

			.carousel a.control-next {
				right: 20px;
				background: rgba(0, 0, 0, .2) url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAMAAACelLz8AAAAPFBMVEUAAADYSWgTAAAAE3RSTlMAVUHafy/37+ihkmpPOOKGdl5J/zZOlgAAAEJJREFUKM/t0rcNACEAQ9HjyDntvysL8IXocfsay/J3jhJIYj7b20/kpb6WwFIySHUkylG5Zkkiixkg3SScBwTOhlmmrAIRrqFR6AAAAABJRU5ErkJggg==) no-repeat center center;
			}
		</style>
	</head>
	<body>
		<div class="carousel">
			<ol class="indicators">
				<li>
					<a href="javascript:;" data-carousel-to="0" class="active"></a>
				</li>
				<li>
					<a href="javascript:;" data-carousel-to="1"></a>
				</li>
				<li>
					<a href="javascript:;" data-carousel-to="2"></a>
				</li>
			</ol>
			<div class="inner">
				<ul class="list">
					<li class="active">
						<a href="#">
							<img class="lazy"
								src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII="
								data-src="https://via.placeholder.com/1920x460.png/ff0000">
						</a>
					</li>
					<li>
						<a href="#">
							<img class="lazy"
								src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII="
								data-src="https://via.placeholder.com/1920x460.png/FFEB34">
						</a>
					</li>
					<li>
						<a href="#">
							<img class="lazy"
								src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII="
								data-src="https://via.placeholder.com/1920x460.png/2878ff">
						</a>
					</li>
				</ul>
			</div>
			<a class="control-prev" href="javascript:;"></a>
			<a class="control-next" href="javascript:;"></a>
		</div>
		<script src="plgin/jquery/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="utils/carousel.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			util_carousel({
				items: '.carousel ul.list li',
				indicators: '.carousel ol.indicators li a',
				prev: '.carousel a.control-prev',
				next: '.carousel a.control-next',
				delay: 5000
			})
		</script>
	</body>
</html>