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