Day05（组件，轮播图插件）
2017-11-07 本文已影响0人
AnnQi
组件，插件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
}
</style>
</head>
<body>
<div id="d1">我是一个div标签</div>
</body>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript">
jQuery.extend({
"m":function(a){
return a.width()+","+a.height();
},
});
console.log($.m($("#d1")));
</script>
</html>
demo 轮播图插件
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="banner.js"></script>
<style type="text/css">
ul {
list-style: none;
}
.main {
width: 1226px;
height: 420px;
position: relative;
top: 0;
left: 50%;
margin-left: -613px;
}
.main_lb {
position: relative;
height: 460px;
width: 1226px;
}
.lbk li {
position: absolute;
display: none;
}
.lbk li:nth-child(1) {
display: block;
}
.btn_l {
z-index: 10;
position: absolute;
left: 40px;
top: 196px;
height: 70px;
width: 40px;
background: url(img/lunbo/btn_l.png) no-repeat 2px 10px;
border-radius: 0 2px 2px 0;
background-color: rgba(0, 0, 0, 0);
transition: 0.4s;
}
.btn_r {
z-index: 10;
position: absolute;
right: -40px;
top: 196px;
height: 70px;
width: 40px;
background: url(img/lunbo/btn_r.png) no-repeat 2px 10px;
border-radius: 2px 0 0 2px;
background-color: rgba(0, 0, 0, 0);
transition: 0.4s;
}
.btn_r:hover {
background-color: rgba(0, 0, 0, 0.5);
cursor: pointer;
}
.btn_l:hover {
background-color: rgba(0, 0, 0, 0.5);
cursor: pointer;
}
.btn_lis {
list-style: none;
position: absolute;
right: 35px;
top: 425px;
z-index: 11;
}
.btn_lis li {
float: left;
height: 6px;
width: 6px;
border: 2px solid #acacac;
border-radius: 8px;
background: #666;
margin-right: 10px;
opacity: 0.6;
cursor: pointer;
}
.btn_ls {
background: #F5EBE0!important;
border: 2px solid #666;
}
</style>
</head>
<body>
<div class="main">
<ul class="lbk">
<li><img src="img/lunbo/lb1.jpg" /></li>
<li><img src="img/lunbo/lb2.jpg" /></li>
<li><img src="img/lunbo/lb3.jpg" /></li>
<li><img src="img/lunbo/lb4.jpg" /></li>
<li><img src="img/lunbo/lb5.jpg" /></li>
</ul>
<ul class="btn_lis">
<li class="btn_ls"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="btn_l"></div>
<div class="btn_r"></div>
</div>
</body>
<script type="text/javascript">
$('.main').slider()
</script>
</html>
(function($) {
$.fn.slider = function(options) {
//this指向当前的选择器
var config = {
index: 0,
timer: null,
speed: 3000,
min: 0.3, //和css中的样式对应
max: 1
};
var opts = $.extend(config, options);
//核心方法，把当前index的图片和icon显示，把除此之外的图片和icon隐藏
var core = function() {
if (opts.index > 4) {
opts.index = 0;
} else if (opts.index < 0) {
opts.index = 4;
}
$('.lbk').children().eq(opts.index).fadeIn(400).siblings('li').fadeOut(400);
$('.btn_lis').children().eq(opts.index).addClass('btn_ls').siblings('li').removeClass('btn_ls');
};
//左边
$(this).find(".btn_l").bind("click", function() {
--opts.index;
core();
});
//右边
$(this).find(".btn_r").bind("click", function() {
++opts.index;
core();
});
//每个icon分配事件
$(this).find(".btn_lis").on("click", "li", function() {
var index = $(this).index();
opts.index = index;
core();
});
//定时器
var start = function() {
opts.timer = setInterval(function() {
++opts.index;
core();
}, opts.speed);
}
$(this).hover(function() {
clearInterval(opts.timer);
}, function() {
start();
});
start();
}
}(jQuery));
