javascript面向对象实现轮播图插件

实现效果

1.视图结构

<div class="jsjy_LL" id="picList" style="position:relative;left: 50%;margin-left: -175px;width: 350px;height: 200px;overflow: hidden;">
        <!--图片区-->
        <div style="width: 1050px;height: 200px;" id="container">
            <div style="float: left">
                <a href="#" target="_blank"></a><img src="../imge/0.jpg" class="ysjyy_img" width="350" height="200">
                <p class="jsjy_LL_title">我是数字0我是第一个</p>
            </div>
            <div style="float: left">
                <a href="#" target="_blank"></a><img src="../imge/1.jpg" class="ysjyy_img" width="350" height="200">
                <p class="jsjy_LL_title">我是数字1我是第二个</p>
            </div>
            <div style="float: left">
                <a href="#" target="_blank"></a><img src="../imge/2.jpg" class="ysjyy_img" width="350" height="200">
                <p class="jsjy_LL_title">我是数字2我是第三个</p>
            </div>
        </div>
        <!--导航栏-->
        <ul style="position: absolute; left: 80px;top: 160px; width: 195px; height: 40px;" id="itemList">
            <li class="active">
                <a href="##">1</a>
            </li>
            <li>
                <a href="##">2</a>
            </li>
            <li>
                <a href="##">3</a>
            </li>
        </ul>
    </div>

提醒，图片路径要换为你自己的图片
接下来是css

<style>
        *{
            margin: 0;
            padding: 0;
        }
        ul li{
            float: left;
            list-style: none;
            width: 60px;
            height: 30px;
            background: black;
            margin-left: 5px;
            text-align: center;
        }
        ul li a{
            color: white;
            text-decoration: none;
        }
        .active{
            background: orange;
        }
        p{
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>

实现效果图如下，但是还没有动画效果

接下来是实现动画效果
上代码

<script>
    //立即执行函数传入window和document对象
    (function (w,d) {
        function Carousel(banner,imgs,words,itemlist,time,slide) {
            console.log('插件实例化成功');
            //给轮播图设置相关属性
            this.banner = banner;
            this.imgs= imgs;
            this.words = words;
            this.itemlist = itemlist.children;
            this.time= time;
            this.imgLength =imgs.length;//获取播放图片的数量
            this.nowImg =0;
            this.interval = 0;
            this.slide = slide;
            //给轮播图功能设置方法


            this.display(this.nowImg);//传入数字

            // this.displayAll();
            // this.changeIndex(this.nowImg);
            // this.imgScroll();

            this.mouseChange();
            this.autoCarousel();
        }
        //让图片展示
        Carousel.prototype.display = function (imgNumber) {
            this.imgs[imgNumber].style.display = "block";//让第一张图片显示
            this.words[imgNumber].style.display = "block";//让提示语显示
            this.itemlist[imgNumber].classList.add("active");//给第一个导航图标添加样式
            //循环变量
            for(var i=0;i<this.imgLength;i++){
                if(i !== imgNumber){//i!=0其他的属性都不现实
                    //和上面设置相反
                    this.imgs[i].style.display = "none";
                    this.words[i].style.display ="none";
                    this.itemlist[i].classList.remove("active");
                }
            }
            this.nowImg = imgNumber;//实时传入图片数量
        }
        //展示所有图片
        Carousel.prototype.displayAll = function(){
            for(var i=0;i<this.imgLength;i++){
                this.imgs[i].style.display = "block";
                this.words[i].style.display = "block";
            }
        }
        //索引样式
        Carousel.prototype.changeIndex = function(imgNumber){
            for(var i=0;i<this.imgLength;i++){
                if(i != imgNumber){
                    this.itemlist[i].classList.remove("active");
                }
                this.itemlist[imgNumber].classList.add('active');
            }
        }
        //图片滑动
        Carousel.prototype.imgScroll = function(){
            if(this.slide){
                this.nowImg = this.nowImg+1;
                if(this.nowImg==this.imgLength){
                    this.nowImg = 0;
                }
                this.displayAll()
                var container =d.getElementById('container');
                this.changeIndex(this.nowImg);
                container.style.marginLeft = -350*this.nowImg + "px";
                container.style.transition = "all 2.5s";
                clearInterval(this.interval);
                var that= this;
                function changAll() {
                    clearInterval(that.interval);
                    that.interval = setInterval(function () {
                        that.imgScroll();
                    },that.time)
                }
                container.addEventListener("transitionend",changAll);
                return;
            }

            if(this.nowImg == this.imgLength-1){
                this.nowImg =0;
            }else{
                this.nowImg = this.nowImg+1;
            }
            this.display(this.nowImg);
        }
        Carousel.prototype.autoCarousel = function(){
            this.interval = setInterval(function () {
                this.imgScroll();
            }.bind(this),this.time)
        }
        Carousel.prototype.mouseChange = function(){
            //console.log(this);
            var _this= this;
            //console.log(_this);
            for(var i=0;i<this.imgLength;i++){
                (function (i) {
                    _this.itemlist[i].onmouseover=function () {
                        clearInterval(_this.interval);
                        _this.display(i);
                    }
                    _this.itemlist[i].onmouseout= function () {
                        clearInterval(_this.interval);
                        _this.interval = setInterval(function () {
                            _this.imgScroll();
                        }.bind(_this),_this.time)
                    }
                })(i)
            }
        }
        //
        w.Carousel = Carousel;
    })(window,document)
    //获取div节点
    var jsjy_LL = document.getElementsByClassName('jsjy_LL')[0];
    //获取img节点
    var ysjyy_img = document.getElementsByClassName('ysjyy_img');
    //获取p节点
    var jsjy_LL_title = document.getElementsByClassName('jsjy_LL_title');
    //获取ul节点
    var itemList = document.getElementById('itemList');
    //切换播放图片模式
    var slide = false;
    //实例化插件，并传入相关参数
    var carousel = new Carousel(jsjy_LL,ysjyy_img,jsjy_LL_title,itemList,2500,slide);
</script>

慢慢看注释吧哈哈哈哈哈哈哈哈