requirejs javascript对象

http://travel.ifeng.com/

 

<script>
  requirejs.config({
       paths:{
        "jquery#1.8.1" : "http://y1.ifengimg.com/fe/jQuery/jquery-1.8.1.min",
        "swiper":"http://y0.ifengimg.com/a/2015/1126/syj/lvyou/swiper-new"
       },
  waitSeconds: 20,shim: {}});
</script>

 

 

define("swiper",["jquery#1.8.1"],function ($) {
    var swiper = {
        init:function(initData){
            this.index = 1;//记录显示的图片的index
            this.timer = null;//定时器
            this.initDom(initData);
            //循环模式
            if(initData.auto){
                this.bigpicInterval();
            };
            if(initData.device == "mobile"){
                this.initMobielEvent(initData);
            }else{
                this.initEvent(initData);
            };
            
        }    
    };
    swiper.init.prototype={
        initDom:function(initData){
            this.container = $('.'+initData.container);
            this.swiper_wrapper = this.container.find('.swiper_wrapper');
            var swiper = this.container.find('.swiper');
            var length = swiper.length;
            this.total = length//记录总共的滑动张数
            //hover操作翻页dom
            this.handler = initData.handlerClassname?this.container.find('.'+initData.handlerClassname):"";
            //翻页对应显示的内容
            this.contentInfo = initData.contentClassname?this.container.find('.'+initData.contentClassname):"";
            //左右翻页按钮
            if(initData.buttonId){
                this.prev = this.container.find('#'+initData.buttonId[0]);
                this.next = this.container.find('#'+initData.buttonId[1]);
            };
            if(initData.loop){
                //循环模式需要给前后各添加一张幻灯
                swiper.eq(0).clone(true).appendTo(this.swiper_wrapper);
                swiper.eq(length-1).clone(true).insertBefore(swiper.eq(0));
                length = length+2;
            };
            //修改父元素的宽度
            this.width = swiper.eq(0).width();
            var widthTotal = this.width*length;
            var _this = this;
            this.swiper_wrapper.width(widthTotal);
            if(initData.loop){
                this.swiper_wrapper.css('margin-left',-this.width);
            };
            
        },
        initEvent:function(initData){
            var swiper = this.container.find('.swiper');
            var _this = this;
            function closeInterval(){
                //关闭定时器
                clearInterval(_this.timer);
                if(_this.prev){
                    _this.prev.show();
                    _this.next.show();
                }
            }
            function openInterval(){
                //开启定时器
                _this.bigpicInterval();
                if(_this.prev){
                    _this.prev.hide();
                    _this.next.hide();
                }
            }
            if(initData.auto){
                swiper.hover(function(){
                closeInterval();
                },function(){
                    openInterval()
                });
                _this.next.hover(function(){
                    closeInterval();
                },function(){
                    openInterval()
                });
                _this.prev.hover(function(){
                    closeInterval();
                },function(){
                    openInterval()
                });
            };
            
            _this.next.on('click',function(){
                clearInterval(_this.timer);
                _this.swiper_wrapper.stop(true,true);
                _this.index = _this.index+1;
                _this.bigpicSwiper();
            });
            _this.prev.on('click',function(){
                clearInterval(_this.timer);
                _this.swiper_wrapper.stop(true,true);
                _this.index = _this.index-1;
                _this.bigpicSwiper();
            });
            if(_this.handler){
                _this.handler.find('li').hover(function() {
                    clearInterval(_this.timer);
                    _this.swiper_wrapper.stop(true,true);
                    _this.index = $(this).index()+1;
                    _this.bigpicSwiper();
                    return false;
                }, function() {
                    openInterval();
                    return false;
                });
            };
            
        },
        bigpicInterval:function(){
            var _this = this;
            clearInterval(this.timer);
            _this.timer = setInterval(function(){
                _this.index = _this.index+1;
                _this.bigpicSwiper();
            },8000);
        },
        bigpicSwiper:function(){
            var width = this.width;
            var index = this.index;
            var _this = this;
            if(index > this.total){
                this.swiper_wrapper.animate({marginLeft:-width*index+'px'},function(){
                    $(this).css('margin-left',-width);
                    _this.index = index = 1;
                    update();
                    return false;
                });
            }else if(index < 1){
                this.swiper_wrapper.animate({marginLeft:-width*index+'px'},function(){
                    $(this).css('margin-left',-_this.total*width);
                    _this.index = index = _this.total;
                    update();
                    return false;
                });
            }else{
                this.swiper_wrapper.animate({marginLeft:-width*index+'px'},function(){
                    update();
                    return false;
                });
            };
            function update(){
                //显示对应内容
                    if(_this.contentInfo){
                        _this.contentInfo.hide();
                        _this.contentInfo.eq(index-1).show();
                    };
                    //操作对应的handler
                    if(_this.handler){
                        var li = _this.handler.find('li');
                        li.removeClass('current');
                        li.eq(index-1).addClass('current');
                    }
            }
        },
        initMobielEvent:function(initData){
            var _this = this;
            var swiper = this.container.find('.swiper');
            var container = this.swiper_wrapper;
            var startX,startY,moveX = 0;
            var initLeft;
            swiper.on('touchstart',function(){
                //关闭定时器
                clearInterval(_this.timer);
                //获取marginleft的值
                initLeft = parseInt(container.css('marginLeft'));
                startMove();
                return false;
            });
            swiper.on('touchmove',function(){
                var location = touchMove();
                moveX = location.x;
                container.css('marginLeft',moveX+initLeft+'px');
                return false;
            });
            swiper.on('touchend',function(){
                if(moveX < -10 || moveX > 10){
                    _this.swiper_wrapper.stop(true,true);
                    if(moveX < -10){
                        //向右滑动
                        _this.index = _this.index+1;
                        
                    }else{
                        //向左滑动
                        _this.index = _this.index-1;
                    };
                    _this.bigpicSwiper();
                }else{
                    //tap事件
                    var href = $(this).find('a').attr('href');
                    window.open(href);
                }
                //初始化
                if(initData.auto){
                    //开启定时器
                    _this.bigpicInterval();
                }
                moveX = 0;
                return false;
            });
            _this.next.on('click',function(){
                clearInterval(_this.timer);
                _this.swiper_wrapper.stop(true,true);
                _this.index = _this.index+1;
                _this.bigpicSwiper();
            });
            _this.prev.on('click',function(){
                clearInterval(_this.timer);
                _this.swiper_wrapper.stop(true,true);
                _this.index = _this.index-1;
                _this.bigpicSwiper();
            });
            function startMove(){
                var touch = event.touches[0];
                startY = touch.pageY;
                startX = touch.pageX;
            };
            function touchMove(){
                var touch = event.touches[0];
                var x = touch.pageX - startX;
                var y = touch.pageY - startY;
                var location = {
                    x: x,
                    y: y
                };
                return location;
            }
        }
    }

    return swiper;
});

 

posted @ 2016-08-22 15:55  lianhuaren  阅读(183)  评论(0)    收藏  举报