第一次写Banner插件版

标签：ati   focus   nload   dcl   src   radius   amp   each   translate   

条件：使用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=css/Banner.css>");//动态加载CSS样式

$("head").append(linkObj);

var wrap = $("<div id=bannerWrap><div id=bannerMiddle></div><a href=‘###‘>&lt;</a><a href=‘###‘>&gt;</a><ul id=‘bannerXiabiao‘></ul></div>");

$(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插件版

标签：ati   focus   nload   dcl   src   radius   amp   each   translate   

原文地址：http://www.cnblogs.com/aibuxuliyou/p/5989224.html