javascript实现轮播图插件

(function($) {
    function Slider(opt) {
        var opts = opt || {};
        this.wrap = opts.father;
        this.img = opts.image;
        this.itemWidth = this.wrap.width();        
        this.imgNum = this.img.length;
        this.interval = opts.interval;
        this.len = this.img.length;
        this.init();
    }
    Slider.prototype.init = function(){ 
        this.nowIndex = 0;
        this.flag = true;
        this.timer = undefined;
        this.createDom();        
        this.bindEvent();
        this.sliderAuto();
    }
    Slider.prototype.createDom = function() {
        var len = this.len;
        var str = " ";
        var pointStr = " ";
        var slider = $("<ul class='slider'><ul>");
        var span = $("<span class='leftArr'>&lt;</span><span class='rightArr'>&gt;</span>");
        var point = $("<ol class='point'><ol>");
        for(var i = 0 ; i < len ; i++) {
            str += "<li><img src=" + this.img[i] + "></li>";
            pointStr += "<li></li>";
        }
        str += "<li><img src=" + this.img[0] + "></li>";
        console.log(str);
        point.html(pointStr);
        this.wrap.append(slider.html(str));
        this.wrap.append(point);
        this.wrap.append(span);
        $(".slider").css({
            width: this.itemWidth * (this.len + 1) + "px"
        })
        $(".point li").eq(0).addClass("active");
    }
    Slider.prototype.bindEvent = function() {
        var that = this;
        $(".point li").add(".leftArr").add(".rightArr").on("click",function() {
            if($(this).attr("class") == "leftArr") {
                that.move("leftArr");
            }else if($(this).attr("class") == "rightArr") {
                that.move("rightArr");
            }else {
                var index = $(this).index();
                that.move(index);
            }
        })
        this.wrap.hover(function() {
            $(".leftArr").show();
            $(".rightArr").show();
            clearInterval(that.timer);
        },function() {
            $(".leftArr").hide();
            $(".rightArr").hide();
            that.sliderAuto();
        })
    }
    Slider.prototype.sliderAuto = function() {
        var that = this;
        clearInterval(that.timer);
        that.timer = setInterval(function(){
            that.move("rightArr");
        },that.interval)
    }
    Slider.prototype.move = function(dir) {
        var that = this;
        var imgNum = that.imgNum;
        var itemWidth = that.itemWidth;
        if(that.flag){
            that.flag = false;
            if(dir == "leftArr" || dir == "rightArr") {
                if(dir == "leftArr") {
                    if(that.nowIndex == 0) {
                        $(".slider").css({
                            left: -(imgNum * itemWidth) + "px"
                        })  
                        that.nowIndex = imgNum - 1;
                    }else {
                        console.log(that.nowIndex);
                        that.nowIndex--;
                    }
                }else {
                    if(that.nowIndex == imgNum - 1) {   
                        $(".slider").animate({
                            left: -(imgNum * itemWidth) + "px"
                        },500,function() {
                            $(".slider").css({
                                left: "0px"
                            })
                            that.flag = true;
                        })
                        that.nowIndex = 0;              
                    }else {                   
                        that.nowIndex++;
                    }
                }
            }else {
                that.nowIndex = dir;
            }
            that.slider();
        }
            
    }

    Slider.prototype.slider = function () {
        var that = this;
        $(".slider").animate({
            left: that.nowIndex * (-that.itemWidth)
        },500,function() {
            that.flag = true;
        })
        that.changePoint();
    }
    Slider.prototype.changePoint = function() {
        $(".wrapper .point li").eq(this.nowIndex).addClass("active").siblings().removeClass("active");  
    }


    $.fn.extend({
        SliderImg : function(options) {
            options.father = this || $("body");
            new Slider(options);
        }
    })
})(jQuery)

使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>轮播图</title>
    //引入css样式
    <link rel="stylesheet" href="css/lunbotu.css">
</head>
<body>
    <div class="wrapper">
    </div>
    //引入自己代码中的jquery
    <script src="../js/jquery.js"></script>
    //引入插件js
    <script src="js/轮播图插件.js"></script>
    <script>
        $(".wrapper").SliderImg({
            image : ["img/1.png","img/2.png","img/3.png","img/4.png","img/5.png"],
            interval : 2000,
        });
    </script>
</body>
</html>

css部分

* {
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 0px;
}
.wrapper {
    position: relative;
    width: 480px;
    height: 302px;
    margin: 0 auto;
    overflow: hidden;
    border: 3px solid #000;
}
.wrapper .slider {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
}
.wrapper .slider li {
    padding: 0;
    margin: 0;
    list-style-type: none;
    float: left;
}
.wrapper .slider li img {
    width: 100%;
    height: 100%;
    outline: none;
    border: none;
    font-size: 0px;
}
.wrapper span {
    position: absolute;
    top: 50%;
    margin-top: -20px;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    font-family: "SongTi";
    background-color: rgba(0,0,0,0.5);
    color: white;
    font-size: 40px;
    cursor: pointer;
    display: none;
}
.wrapper .leftArr {
    left: 0;
}
.wrapper .rightArr {
    right: 0;
}
.wrapper .point {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(255,255,255,0.5);
    border-radius: 10px;
}
.wrapper .point li {
    width: 15px;
    height: 15px;
    background-color: #fff;
    float: left;
    margin: 2px 10px;
    border-radius: 50%;
    cursor: pointer;
}
.wrapper .point .active {
    background-color: #f40;
}