标签：function 插件 轮播 img javascript wrapper slider nowIndex var

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;
}

标签：function,插件,轮播,img,javascript,wrapper,slider,nowIndex,var
来源： https://blog.csdn.net/weixin_44456354/article/details/111872479

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。