JS组件化开发

CSS部分

1.kui-carousel {
2            position: relative;
3            overflow: hidden;
4        }
5
6        [kui-anim=fade] .kui-carousel-item >* {
7            position: absolute;
8            left: 0;
9            right: 0;
10            top: 0;
11            bottom: 0;
12            opacity: 0;
13            filter:Alpha(opacity=0);
14        }
15        [kui-anim=fade] .kui-carousel-item >*.kui-show {
16            opacity: 1;
17            filter:Alpha(opacity=100);
18        }
19
20        /* 指示器 */
21        [kui-pagePation=insider] .kui-carousel-pagePation {
22            text-align: center;
23            position: absolute;
24            bottom: 10px;
25            left: 0;
26            right: 0;
27        }
28        [kui-pagePation=insider] .kui-carousel-pagePation >* {
29            display: inline-block;
30            text-decoration: none;
31            height: 4px;
32            background: #333;
33            padding:0 15px;
34            margin:0 5px;
35            opacity: 0.3;
36            filter:Alpha(opacity=30);
37            border-radius: 2px;
38        }
39        [kui-pagePation=insider] .kui-carousel-pagePation >*.kui-this {
40            opacity: 0.5;
41            filter:Alpha(opacity=50);
42        }

HTML部分

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

JS部分

1var CarouselFn = (function() {
2
3            function Carousel() {}
4
5            var options = {
6                width:'',
7                height:'',
8                anim:'default', //切换方式 ; default 左右，fade 淡入
9                autoplay:true,//开启轮播
10                delay:1000,  //延时
11                idx : 0,  //播放序号
12                pagePation:'insider', //分页
13                trigger:'click'
14            }
15
16            var ELEM_NAME = ['kui-carousel' ,'.kui-carousel-item','kui-show','.kui-carousel-pagePation','kui-this'];
17            Carousel.fn = Carousel.prototype;
18            Carousel.fn.init = function(option) {
19                var self = this;
20                self.option = $.extend({}, options ,option);
21                //容器
22                self.$dom = $(self.option.elem);
23                self.carousel_list = self.$dom.find(ELEM_NAME[1]+' >*');
24                //限制序号取值范围
25                self.option.idx = self.option.idx < self.carousel_list.length ? self.option.idx : 0;
26                //设置切换类型
27                self.$dom.attr('kui-anim' ,self.option.anim);
28                //设置样式
29                self.$dom.css({width:self.option.width ,height:self.option.height})
30                //分页
31                self.PagePation();
32                self.autoplay();
33                return this;
34            }
35
36            Carousel.fn.autoplay = function() {
37                var self = this;
38                if(!self.option.autoplay) return;
39                self.Timer = setInterval( _setIntervalfn ,self.option.delay);
40                self.carousel_list.on('mouseover' ,function() {
41                    clearInterval(self.Timer);
42                })
43                self.carousel_list.on('mouseout' ,function() {
44                    self.Timer = setInterval( _setIntervalfn ,self.option.delay);
45                })
46                function _setIntervalfn() {
47                    self.option.idx+=1;
48                    if(self.option.idx >= self.carousel_list.length){
49                        self.option.idx = 0;
50                    }
51                    self.activeIndex();
52                }
53            }
54
55            Carousel.fn.PagePation = function() {
56                var self = this;
57                if( $.inArray(self.option.pagePation ,['insider' ,'outsider']) == -1 ) return;
58                self.$dom.attr('kui-pagePation' ,self.option.pagePation);
59                $.each(self.carousel_list ,function(i) {
60                    $('<a href="javascript:;" class="'+(i==self.option.idx?ELEM_NAME[4]:'')+'"></a>').appendTo(ELEM_NAME[3]);
61                })
62                self.carousel_page = self.$dom.find(ELEM_NAME[3]+'>*');
63                self.activeIndex();
64                self.carousel_page.on('click' ,function() {
65                    self.option.idx = $(this).index();
66                    self.activeIndex()
67                })
68            }
69
70            Carousel.fn.activeIndex = function() {
71                var self = this;
72                self.carousel_list.removeClass(ELEM_NAME[2]);
73                self.carousel_list.eq( self.option.idx ).addClass(ELEM_NAME[2]);
74                self.carousel_page.removeClass(ELEM_NAME[4]);
75                self.carousel_page.eq( self.option.idx ).addClass(ELEM_NAME[4]);
76            }
77
78            return new Carousel();
79
80        })();
81

调用组件

1var options = {
2            elem:'#carousel',
3            anim:'fade',
4            height:'400px',
5            delay:2000,
6            // autoplay:false,
7            pagePation:'none'
8        };
9
10        $in = CarouselFn.init(options);