Banner插件版

条件：使用JQ。

使用情况：当目标元素调用该插件时，插件产生的元素会替换该目标元素，并且在目标元素位置生成。需要输入一组图片地址数组（对象还没有实现，慢慢改善）默认宽高是600*400,可在后面的参数中自行设置；

CSS部分：

　　

　　　　　　把CSS样式保存在名为Banner的CSS文件中，并且放在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>");
                $("head").append(linkObj);//动态添加CSS样式
                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;//有参数输入就自行参数
                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)
                    }
　　　　　　　　　　　　//一次点击之后，两秒内不能点击
                    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);
                    }
                }
            },
}            

调用例如：$("div").Banner(imgArr,600,400);