首页 > 代码库 > 第一次写Banner插件版
第一次写Banner插件版
条件：使用JQ。
使用情况：当目标元素调用该插件时，插件产生的元素会替换该目标元素，并且在目标元素位置生成。需要输入一组图片地址数组（对象还没有实现，慢慢改善）默认宽高是600*400,可在后面的参数中自行设置；
CSS部分：
* {
margin: 0;
padding: 0;
}
#bannerWrap {
position: relative;
overflow: hidden;
}
#bannerMiddle {
position: absolute;
top: 0px;
}
#bannerMiddle img {
float: left;
}
#bannerWrap>a {
position: absolute;
width: 50px;
height: 60px;
text-align: center;
line-height: 60px;
top: 50%;
transform: translateY(-50%);
text-decoration: none;
background-color: rgba(0, 0, 0, 0.3);
color: white;
display: none;
}
#bannerWrap>a:nth-of-type(1) {
left: 0px;
}
#bannerWrap>a:nth-of-type(2) {
right: 0px;
}
#bannerXiabiao{
position: absolute;
bottom: 10px;
height: 30px;
list-style: none;
}
#bannerXiabiao>li {
width: 30px;
height: 30px;
float: left;
margin-left: 10px;
border-radius: 50%;
color: white;
background-color: rgba(0, 0, 0, 0.5);
text-align: center;
line-height: 30px;
}
#bannerXiabiao>li:nth-child(1) {
display: none;
}
#bannerXiabiao .color {
background: red;
}
JS部分：
$.fn.extend({
//传入一个图片数组
Banner:function(imgArr,width,height) {
var linkObj=$("<link rel=stylesheet type=text/css href=http://www.mamicode.com/css/Banner.css>");//动态加载CSS样式
$("head").append(linkObj);
var wrap = $("<div id=bannerWrap><div id=bannerMiddle></div><a href=http://www.mamicode.com/‘###‘><>
$(this).after(wrap);
$(this).remove();
var imgageArr = [];
var loadNum = 0;
var imgWidth = width||600;//传入参数中有width就使用width
var imgHeight=height||400;
var middle = $("#bannerMiddle");
var xiabiao = $("#bannerXiabiao");
var wrap = $("#bannerWrap");
wrap.css({height:imgHeight,width:imgWidth});
var move=wrap.children("a");
var last = move.eq(0);
var next =move.eq(1);
var index = 1;
var imgNum = imgArr.length + 1;
var guoduTimer, autoTimer,clickBolTimer;
var clickBol=true;//控制连续点击
for(var i = 0; i < imgArr.length; i++) {
var img = new Image();
img.index = i;
img.src = imgArr[i];
img.onload = function() {
loadNum++;
imgageArr.push(this);
if(loadNum == imgArr.length) {
main();
}
}
}
function main() {
//开启自动播放
function openAuto() {
autoTimer = setInterval(function() {
index++;
if(index == imgLength) {
index = 1;
middle.css("left", 0);
}
change();
}, 4000)
}
//一次点击
2秒后才能继续点击
function clickBolTime(){
clearTimeout(clickBolTimer);
clickBol=false;
clickBolTimer=setTimeout(function(){
clickBol=true;
},2000)
}
wrap.hover(function() {
move.each(function() {
$(this).css("display", "block");
})
clearInterval(autoTimer);
}, function() {
openAuto();
move.each(function() {
$(this).css("display", "none");
})
})
//用于获取加载好的图片
function getImg(x) {
for(var i = 0; i < imgageArr.length; i++) {
if(x == imgageArr[i].index) {
return imgageArr[i];
}
}
}
for(var i = 0; i <= imgageArr.length; i++) {
var img = document.createElement("img");
img.style.width=imgWidth+"px";
img.style.height=imgHeight+"px";
var li = $("<li>" + i + "</li>");
if(i == 0 || i == imgageArr.length) {
img.src = getImg(imgageArr.length - 1).src;
} else {
img.src = getImg(i - 1).src;
}
middle.append(img);
xiabiao.append(li);
}
middle.css({
width:imgNum * imgWidth,
height:imgHeight,
left:-imgWidth,
});
xiabiao.width((imgNum - 1) * 40);
var center = (wrap.width() - xiabiao.width()) / 2;//让下标居中显示
xiabiao.css("left", center);
var imgLength = middle.children().length;
next.click(function() {
if(clickBol){
index++;
if(index == imgLength) {
index = 1;
middle.css("left", 0);
}
clickBolTime()
change();
}
})
last.click(function() {
if(clickBol){
index--;
if(index < 0) {
index = imgLength - 2;
middle.css("left", -(imgLength - 1) * imgWidth);
}
clickBolTime()
change();
}
})
var lis = xiabiao.children();
lis.eq(1).addClass("color");
lis.click(function() {
if(clickBol){
index = $(this).index()
change();
clickBolTime()
}
})
function change() {
lis.each(function() {
$(this).removeClass();
})
if(index == 0) {
lis.last().addClass("color");
} else {
lis.eq(index).addClass("color");
}
var e = -index * imgWidth;
middle.animate({"left":e},{duration:1000,})
}
openAuto();
window.onfocus=function(){
openAuto();
}
window.onblur=function(){
clearInterval(autoTimer);
}
}
}
}
第一次写Banner插件版