首页学习－－banner的动画及轮播

效果请见 http://www.3zang.tech/

html

<section className="g-slide">
        <div className="m-slide">
            <div className="slide-img">
                <ul>
                    <li className="active">
                        <div className="banner-img banner1-img-one">
                            <img src="images/banner1-one.png" />
                        </div>
                        <div className="banner-img banner1-img-two">
                            <img src="images/banner1-two.png" />
                        </div>
                        <img className="bg-img" src="images/banner1.png" width="100%" />
                    </li>
                    <li>
                        <div className="banner-img banner2-img-one">
                            <img src="images/banner2-one.png" />
                        </div>
                        <div className="banner-img banner2-img-two">
                            <img src="images/banner2-two.png" />
                        </div>
                        <img className="bg-img" src="images/banner2.png" width="100%" />
                    </li>
                    <li>
                        <div className="banner-img banner3-img-one">
                            <img src="images/banner3-one.png" />
                        </div>
                        <div className="banner-img banner3-img-two">
                            <img src="images/banner3-two.png" />
                        </div>
                        <img className="bg-img" src="images/banner3.png" width="100%" />
                    </li>
                </ul>
            </div>
            <div className="slide-btn">
                <a href="javascript:;" className="active"></a>
                <a href="javascript:;"></a>
                <a href="javascript:;"></a>
            </div>
        </div>

js部分

banner: function(){    //首页banner焦点幻灯片
            var pollingTime = this.pollingTime;
            var opts = {
                'time': 3000//轮播时间间隔
            };

            function plugin(elm, options){
                var _this = this;

                _this.$elm = $(elm);

                opts = $.extend(opts, options||{});


                _this.init();
            }

            plugin.prototype = {
                init: function(){
                    var _this = this;

                    opts.idx = 1;    //初始化几秒后显示第一张图

                    opts.lengths = _this.$elm.find(opts.btnBox).find(opts.btnDom).length; //长度

                    //视图事件监听
                    _this.handle();
                },
                handle: function(){
                    var _this = this;

                    function polling(){
                        if(opts.idx >= opts.lengths){
                            opts.idx = 0;
                        }

                        _this.$elm.find(opts.btnBox).find(opts.btnDom).eq(opts.idx).addClass(opts.activeClass).siblings().removeClass(opts.activeClass);

                        _this.$elm.find(opts.imgBox).find(opts.imgDom).eq(opts.idx).addClass(opts.activeClass).siblings().removeClass(opts.activeClass);

                        ++opts.idx;
                    }

                    function pollingTime(){
                        return setInterval(polling, opts.time);
                    }

                    opts.timeHandle = pollingTime();

                    _this.$elm.hover(function(){
                        clearTimeout(opts.timeHandle);
                    },function(){
                        opts.timeHandle = pollingTime();
                    });

                    _this.$elm.find(opts.btnBox).find(opts.btnDom).hover(function(e){
                        opts.idx = $(this).index();

                        polling();

                        clearTimeout(opts.timeHandle);

                        e.stopPropagation();
                    });
                }
            };

            $.fn.hslide = function(options){
                return new plugin(this, options);
            }

            /*banner轮播*/
            $('.m-slide').hslide({
                'time': pollingTime,
                'imgBox': '.slide-img',
                'imgDom': 'li',
                'btnBox': '.slide-btn',
                'btnDom': 'a',
                'activeClass': 'active'
            });
        },

css部分

动画部分 很简单的动画效果

/*定义动画效果*/
.m-slide .slide-img .active .banner1-img-one,.m-slide .slide-img .active .banner2-img-one{display:block;animation-name:saAnic;-webkit-animation:saAnic 0.3s linear 0s normal none;-moz-animation:saAnic 0.3s linear 0s normal none;animation:saAnic 0.3s linear 0s normal none;}
@-webkit-keyframes saAnic{from{opacity:0;left:3%;} to{opacity:1;left:5%;} }
@-moz-keyframes saAnic{from{opacity:0;left:3%;} to{opacity:1;left:5%;} }
@keyframes saAnic{from{opacity:0;left:3%;} to{opacity:1;left:5%;} }

.m-slide .slide-img .active .banner1-img-two,.m-slide .slide-img .active .banner2-img-two{display:block;animation-name:saAnid;-webkit-animation:saAnid 0.3s linear 0s normal none;-moz-animation:saAnid 0.3s linear 0s normal none;animation:saAnid 0.3s linear 0s normal none;}
@-webkit-keyframes saAnid{from{opacity:0;right:3%;} to{opacity:1;right:5%;} }
@-moz-keyframes saAnid{from{opacity:0;right:3%;} to{opacity:1;right:5%;} }
@keyframes saAnid{from{opacity:0;right:3%;} to{opacity:1;right:5%;} }

.m-slide .slide-img .active .banner3-img-one{display:block;animation-name:baoAni;-webkit-animation:baoAni 0.4s linear 0s normal none;-moz-animation:baoAni 0.4s linear 0s normal none;animation:baoAni 0.4s linear 0s normal none;}
@-webkit-keyframes baoAni{from{opacity:0;left:60%;} to{opacity:1;left:50%;} }
@-moz-keyframes baoAni{from{opacity:0;left:60%;} to{opacity:1;left:50%;} }
@keyframes baoAni{from{opacity:0;left:60%;} to{opacity:1;left:50%;} }

.m-slide .slide-img .active .banner3-img-two{display:block;animation-name:saAni;-webkit-animation:saAni 0.4s linear 0s normal none;-moz-animation:saAni 0.4s linear 0s normal none;animation:saAni 0.4s linear 0s normal none;}
@-webkit-keyframes saAni{from{opacity:0;-webkit-transform:scale(0,0);} to{opacity:1;-webkit-transform:scale(1,1);} }
@-moz-keyframes saAni{from{opacity:0;-moz-transform:scale(0,0);} to{opacity:1;-moz-transform:scale(1,1);} }
@keyframes saAni{from{opacity:0;transform:scale(0,0);} to{opacity:1;transform:scale(1,1);} }

这个抽象出来来，要看看js的基础了