JS组件化开发-轮播图组件

CSS部分

.kui-carousel {
            position: relative;
            overflow: hidden;
        }

        [kui-anim=fade] .kui-carousel-item >* {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            opacity: 0;
            filter:Alpha(opacity=0);
        }
        [kui-anim=fade] .kui-carousel-item >*.kui-show {
            opacity: 1;
            filter:Alpha(opacity=100);
        }

        /* 指示器 */
        [kui-pagePation=insider] .kui-carousel-pagePation {
            text-align: center;
            position: absolute;
            bottom: 10px;
            left: 0;
            right: 0;
        }
        [kui-pagePation=insider] .kui-carousel-pagePation >* {
            display: inline-block;
            text-decoration: none;
            height: 4px;
            background: #333;
            padding:0 15px;
            margin:0 5px;
            opacity: 0.3;
            filter:Alpha(opacity=30);
            border-radius: 2px;
        }
        [kui-pagePation=insider] .kui-carousel-pagePation >*.kui-this {
            opacity: 0.5;
            filter:Alpha(opacity=50);
        }

HTML部分

<div id="carousel" class="kui-carousel" kui-anim="fade" style="height: 500px;border-bottom: 1px solid #f2f2f2;">
    <div class="kui-carousel-item">
        <div><h1 style="margin: 150px auto;text-align: center"> This Carousel Is Page One</h1></div>
        <div><h1 style="margin: 150px auto;text-align: center;color: red;"> This Carousel Is Page Two And This Text Color is RED</h1></div>
    </div>
    <div class="kui-carousel-pagePation"></div>
</div>

JS部分

var CarouselFn = (function() {

            function Carousel() {}

            var options = {
                width:'',
                height:'',
                anim:'default', //切换方式 ; default 左右，fade 淡入
                autoplay:true,//开启轮播
                delay:1000,  //延时
                idx : 0,  //播放序号
                pagePation:'insider', //分页
                trigger:'click'
            }

            var ELEM_NAME = ['kui-carousel' ,'.kui-carousel-item','kui-show','.kui-carousel-pagePation','kui-this'];
            Carousel.fn = Carousel.prototype;
            Carousel.fn.init = function(option) {
                var self = this;
                self.option = $.extend({}, options ,option);
                //容器
                self.$dom = $(self.option.elem);
                self.carousel_list = self.$dom.find(ELEM_NAME[1]+' >*');
                //限制序号取值范围
                self.option.idx = self.option.idx < self.carousel_list.length ? self.option.idx : 0;
                //设置切换类型
                self.$dom.attr('kui-anim' ,self.option.anim);
                //设置样式
                self.$dom.css({width:self.option.width ,height:self.option.height})
                //分页
                self.PagePation();
                self.autoplay();
                return this;
            }

            Carousel.fn.autoplay = function() {
                var self = this;
                if(!self.option.autoplay) return;
                self.Timer = setInterval( _setIntervalfn ,self.option.delay);
                self.carousel_list.on('mouseover' ,function() {
                    clearInterval(self.Timer);
                })
                self.carousel_list.on('mouseout' ,function() {
                    self.Timer = setInterval( _setIntervalfn ,self.option.delay);
                })
                function _setIntervalfn() {
                    self.option.idx+=1;
                    if(self.option.idx >= self.carousel_list.length){
                        self.option.idx = 0;
                    }
                    self.activeIndex();
                }
            }

            Carousel.fn.PagePation = function() {
                var self = this;
                if( $.inArray(self.option.pagePation ,['insider' ,'outsider']) == -1 ) return;
                self.$dom.attr('kui-pagePation' ,self.option.pagePation);
                $.each(self.carousel_list ,function(i) {
                    $('<a href="javascript:;" class="'+(i==self.option.idx?ELEM_NAME[4]:'')+'"></a>').appendTo(ELEM_NAME[3]);
                })
                self.carousel_page = self.$dom.find(ELEM_NAME[3]+'>*');
                self.activeIndex();
                self.carousel_page.on('click' ,function() {
                    self.option.idx = $(this).index();
                    self.activeIndex()
                })
            }

            Carousel.fn.activeIndex = function() {
                var self = this;
                self.carousel_list.removeClass(ELEM_NAME[2]);
                self.carousel_list.eq( self.option.idx ).addClass(ELEM_NAME[2]);
                self.carousel_page.removeClass(ELEM_NAME[4]);
                self.carousel_page.eq( self.option.idx ).addClass(ELEM_NAME[4]);
            }

            return new Carousel();

        })();

调用组件

var options = {
            elem:'#carousel',
            anim:'fade',
            height:'400px',
            delay:2000,
            // autoplay:false,
            pagePation:'none'
        };

        $in = CarouselFn.init(options);