js组件封装源码:
$.fn.extend({
relayAssembly:function() {
var _this = $(this);
var _ul = $(".img-list ul");
var _li = $(".img-list li");
/*每个li固定宽度和高度*/
_li.width(_this.width());
_li.height(_this.height());
var _lis = $(".img-list li").length;
var _liwidth = $(".img-list li").width();
var _dul = $(".dot ul");
var _dli = $(".dot li");
/*上一张箭头*/
var _prev = $(".arrow .prev");
_prev.css("line-height",_this.height()+"px");
/*下一张箭头*/
var _next = $(".arrow .next");
_next.css("line-height",_this.height()+"px");
/*设置角标变量*/
var _eq = 0;
_ul.width(_lis*_liwidth);
/*监听浏览器窗口变化*/
var resizeTimer = null;
$(window).resize(function () {
if (resizeTimer) clearTimeout(resizeTimer);
resizeTimer = setTimeout(function(){
_li.width(_this.width());
_li.height(_this.height());
_liwidth = $(".img-list li").width();
_ul.width(_lis*_liwidth);
} , 500);
});
var timer = setInterval(assembly,2000);
/*鼠标悬停停止轮播,鼠标移开开始轮播*/
_this.on("mouseover",function(){
clearInterval(timer);
}).on("mouseout",function(){
timer = setInterval(assembly, 2000);
});
/*下一张*/
_next.click(function(){
next();
});
/*下一张调用函数*/
function next(){
_eq++;
if (_eq == _lis) {
_eq = 0;
_ul.stop().animate({"margin-left":"-"+_eq*_liwidth},0);
next()
}else if(_eq == (_lis-1)){
_dli.eq(0).addClass("active").siblings().removeClass("active");
_ul.stop().animate({"margin-left":"-"+_eq*_liwidth},500);
}else{
_dli.eq(_eq).addClass("active").siblings().removeClass("active");
_ul.stop().animate({"margin-left":"-"+_eq*_liwidth},500);
}
}
/*上一张*/
_prev.click(function(){
prev();
});
/*上一张调用函数*/
function prev(){
_eq--;
if (_eq == 0) {
_eq = _lis;
_ul.stop().animate({"margin-left":"-"+_eq*_liwidth},0);
prev()
}else if(_eq == (_lis-1)){
_dli.eq(0).addClass("active").siblings().removeClass("active");
_ul.stop().animate({"margin-left":"-"+_eq*_liwidth},500);
}else{
_dli.eq(_eq).addClass("active").siblings().removeClass("active");
_ul.stop().animate({"margin-left":"-"+_eq*_liwidth},500);
}
}
/*定时轮播*/
function assembly(){
_eq++;
if (_eq == _lis) {
_eq = 0;
_ul.stop().animate({"margin-left":"-"+_eq*_liwidth},0);
clearInterval(timer);
timer = setInterval(assembly, 0);
}else if(_eq == (_lis-1)){
_dli.eq(0).addClass("active").siblings().removeClass("active");
_ul.stop().animate({"margin-left":"-"+_eq*_liwidth},500);
clearInterval(timer);
timer = setInterval(assembly, 2000);
}else{
_dli.eq(_eq).addClass("active").siblings().removeClass("active");
_ul.stop().animate({"margin-left":"-"+_eq*_liwidth},500);
clearInterval(timer);
timer = setInterval(assembly, 2000);
}
}
//给每个dotli绑定事件
for(var i = 0;i<_dli.length;i++){
_dli[i].onclick = function(){
var _index = $(this).attr("index");
_eq = _index;
if (_eq == _lis) {
_eq = 0;
_ul.stop().animate({"margin-left":"-"+_eq*_liwidth},0);
}else if(_eq == (_lis-1)){
_dli.eq(0).addClass("active").siblings().removeClass("active");
_ul.stop().animate({"margin-left":"-"+_eq*_liwidth},500);
}else{
_dli.eq(_eq).addClass("active").siblings().removeClass("active");
_ul.stop().animate({"margin-left":"-"+_eq*_liwidth},500);
}
}
}
}
});
页面的布局:
<div class="broadcast" id="broadcast">
<div class = "img-list">
<ul>
<li class="img-1"></li>
<li class="img-2"></li>
<li class="img-3"></li>
<li class="img-4"></li>
<li class="img-5"></li>
<!--最后一张图片与第一张相同-->
<li class="img-1"></li>
</ul>
</div>
<div class = "dot">
<ul>
<li index = "0" class="active"></li>
<li index = "1"></li>
<li index = "2"></li>
<li index = "3"></li>
<li index = "4"></li>
<!--最后一张图片与第一张图片重合,设置隐藏的指示灯-->
<li index = "5" class = "none"></li>
</ul>
</div>
<div class="arrow">
<div class="prev"><</div>
<div class="next">></div>
</div>
</div>
css部分:
ul li{list-style: none;padding: 0;}
.none{display: none!important;}
.broadcast ul{margin: 0;padding: 0;overflow: hidden;}
.broadcast{position: relative;margin: 0 auto;width: 100%;height: 250px;}
.broadcast:hover>.arrow>div{display: block;}
.broadcast .img-list {overflow: hidden;}
.broadcast .img-list li{float: left;display: inline-block;text-align: center;}
.broadcast .dot{position: absolute;bottom: 10px;left: 0;right: 0;text-align: center;}
.broadcast .dot ul li{width: 15px;height: 15px;border-radius: 50%;background: #999;display: inline-block;cursor: pointer;}
.broadcast .dot ul li.active{background:#333;}
.broadcast .arrow>div{display: none;font-size: 24px;color: #666;position: absolute;top: 0;cursor: pointer;padding: 0 10px;}
.broadcast .arrow>div:hover{background: rgba(0,0,0,0.2);}
.broadcast .arrow .prev{left: 0;}
.broadcast .arrow .next{right: 0;}
/*测试所用背景*/
.broadcast .img-list li.img-1{background: lightcoral;}
.broadcast .img-list li.img-2{background: lightsalmon;}
.broadcast .img-list li.img-3{background: lightslategray;}
.broadcast .img-list li.img-4{background: lightseagreen;}
.broadcast .img-list li.img-5{background: lightblue;}
组件的调用:
$("#broadcast").relayAssembly();