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

最新推荐文章于 2024-04-30 16:57:21 发布

上网的虫不叫网虫

最新推荐文章于 2024-04-30 16:57:21 发布

阅读量1.4k

点赞数

分类专栏： JS plugin 文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/qq_42961150/article/details/123133655

版权

JS 同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

plugin

5 篇文章 0 订阅

订阅专栏

概要

轮播（走马灯）在网站开发中几乎是必不可少的，网上也有许多的相关插件，比如说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>

Tips

基于jQuery，必须先引入jQuery插件。
本插件适用于左右轮播需求。
如果需要其他轮播方式，可以到carousel.js中扩展。

----- 看完啦别忘记点赞哟，您的肯定就是对我最大的支持 END -----

关注我，不迷路

如果任何疑问的可以在评论区留言，还可以加QQ群交流：568984539，加群备注‘地区-名字-技术类型’。

更多前端等相关知识可关注我个人博客：https://blog.csdn.net/qq_42961150?spm=1011.2124.3001.5343

上网的虫不叫网虫

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
基于jQuery轮播carousel.js（轻量化-企业级）

概要轮播（走马灯）在网站开发中几乎是必不可少的，网上也有许多的相关插件，比如说swiper就是一个很大型的轮播插件，还有许多UI框架中也是封装了自己的swiper。在做开发的时候，有时候考虑到网站的性能优化，可能不想去引入第三方的插件，不是说第三方插件不好，而是第三方插件就是太好了，功能太齐全，同时增加了代码的重量。所以在大型jQuery项目中，可以使用自己封装的更轻量插件，这样保证质量的同时，还能保证加载更快。基于jQuery超轻量轮播carousel.js，就具有满足大型项目、轻量等特点。car
复制链接

扫一扫