JQuery插件:在jquery的基础上封装的一个基于jquery的插件。
Html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>轮播器1</title>
<link rel="stylesheet" href="css/CarouselH.css" />
<script type="text/javascript" src="js/jquery-3.2.0.js" ></script>
<script type="text/javascript" src="js/Carousel插件.js" ></script>
<script type="text/javascript">
$(function(){
$("#icarousel").CarouselToH(); //调用插件
});
</script>
</head>
<body>
<div id="icarousel">
<ul class="content">
<li class="item"><img src="img/1.jpg"></li>
<li class="item"><img src="img/2.jpg"></li>
<li class="item"><img src="img/3.png"></li>
</ul>
<ul class="dot">
<li class="hover"></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
Css
#icarousel>.content{
position: relative;
top:0px;
list-style: none;
width: 100%;
height: 100%;
background: green;
}
#icarousel>.content>.item{
width: 100%;
height: 100%;
}
#icarousel>.content img{
width: 100%;
height: 100%;
}
/*轮播器提示点*/
#icarousel>.dot{
position: absolute;
bottom:10px;left: 50%;
overflow: hidden;
list-style: none;
-webkit-transform: translate(-50%, -50%);/*盒子居中*/
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#icarousel>.dot>li{
float: left;
display: block;
margin: 0 5px;
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(250,250,250,0.4);
}
li.hover{
background: red !important;
}
#icarousel>.left,#icarousel>.right{
position: absolute;
top: 50%;
margin-top: -35px;
font-size: 60px;
line-height: 70px;
color:rgba(160, 173, 160, 0.57);
box-sizing: border-box;
}
Jquery插件代码
;(function($,window,document,undefined){
$.fn.CarouselToH = function(options){
var height=this.height();
var defaults = {
sel:'.content',
selDot:'.dot>li',
dotEvent:'click',
}
var options = $.extend(true,defaults,options);
this.find(options.selDot).on(options.dotEvent,function(){
_this=$(this);
_this.addClass('hover').siblings().removeClass('hover');
_this.parent().prev().stop().animate({top:-_this.index()*height+"px"},500);
});
}
$.fn.CarouselToW = function(options){
var width=this.width();
var defaults = {
sel:'.content',
selDot:'.dot>li',
dotEvent:'click',
}
var options = $.extend(true,defaults,options);
this.find(options.selDot).on(options.dotEvent,function(){
_this=$(this);
_this.addClass('hover').siblings().removeClass('hover');
_this.parent().prev().stop().animate({left:-_this.index()*width+"px"},500);
});
}
})(jQuery,window,document);
总结:如果项目是基于Jquery我们可以封装一些基于Jquery的插件,以便重复使用。
此外我们还可以写基于jquery的方法 这个有类似C#里面的拓展方法。