基于jq的定制化的封装小插件,轮播图,和大家分享
大家好!我是一名刚刚入门的一个前端小白,最近在学习中自己封装了一个插件,是基于jquery的一个小demo。大家可以看一下,哪里做的不足也可以评论一下,共同学习。好的,废话不多说,咱们还是上图吧!
html部分
因为大部分页面都拼接到了js部分所以,就在页面只放了一个空的div只需要再增加一个相同的盒子,和javascript里面增加一行代码,即可实现多个轮播图。
<div class="box1"></div>
css部分
这里是把轮播图样式设置好,以便于在网页中渲染个性化,大家可以根据自己的喜欢到javascript的拼接部分修改即可。
<style>
* {
margin: 0;
padding: 0;
}
ul, ol {
list-style: none;
}
span:hover {
background-color: rgba(0, 0, 0, .8);
}
.active {
background-color: rgba(255, 255, 255, .8);
box-shadow: 0px 0px 0px 3px rgba(255, 255, 255, .3);
}
</style>
js部分
主要实现的功能都在js里面实现的,有一部分是css在里面拼接出来的,大家不喜欢的话可以删除掉,或者自己在css里面重新编写样式。在这里,大家只需要在html里面增加一个空的div,并加上类名。,在js最后使用$(’.盒子类名’).lunbo(data); 即可实现多个轮播图效果。
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
var data = ['图片地址自己可以修改一下', 'img/2.jpg', 'img/3.jpg', 'img/4.jpg', 'img/5.jpg'];
var data1 = ['img/3.jpg', 'img/4.jpg', 'img/5.jpg'];
$.fn.extend({
lunbo: function (d