(function(window, $){ $(function(){ var _bEffectNone=function(){}, bEffectNone={}, _bEffectFade=function(){}, bEffectFade= { wrapper: $("#coverWrap") ,option: { animation: false ,design: ($("#coverList").length>0 ? $("#coverList").attr("class").replace("design","") : '00') ,debug: false ,duration: cover_duration ,interval: cover_interval ,length: $("#coverWrap img").length ,viewWidth: $("#coverArea").width() ,offset: $("#coverArea").outerWidth() ,resize: false ,defer: null ,easing: "easeOutCubic" } ,position: 0 //初期化処理 ,init: function(){ //動的に#coverWrapに設定されるのはwidth,height,margin-leftのみ if($("#coverList").length <= 0){ return false; } if(1500 < this.option.viewWidth){ this.option.viewWidth = $(window).width(); } if(1500 < this.option.offset){ this.option.offset = $(window).width(); } //画像幅を表示エリア幅に設定 this.wrapper.find("a,img").width(this.option.viewWidth); //単一画像 or 複数毎でクラスを分ける、ナビの表示も切り替え if(this.option.length < 2){ this.wrapper.find(">a").addClass("cover-single").removeAttr("style"); $("#coverList").find(".nav, #coverLeft, #coverRight").css({display: 'none'}); }else{ this.wrapper.find(">a").addClass("cover-multi").removeAttr("style"); $("#coverList").find(".nav, #coverLeft, #coverRight").removeAttr("style"); } this.wrapper.width(this.option.viewWidth); /* v1.6 */ h = parseInt($("#coverWrap-height").attr("h")); if ( h == 0) { h = "auto"; } else { h = h + "px"; } this.wrapper.height(h); // this.wrapper.height("auto"); /* v1.6 2014.07.04 */ this.setImagePosition(); //2枚以上の時はアニメーション開始 if(1 < this.option.length){ this.playAuto(); this.removeNaviEvent(this.option.design); this.addNaviEvent(this.option.design); } } ,setImagePosition: function(){ var _this = this; this.wrapper.find(">a").css({"margin-left": "0"}); this.wrapper.find(">a").not(":first").each(function(){ $(this).css({"margin-left": "-100%"}); }); } //パラメータリセット ,reset: function(){ //this.wrapper = $("#coverWrap").removeAttr('style'); this.wrapper = $("#coverWrap"); this.option.animation = false; this.option.design = ($("#coverList").length>0 ? $("#coverList").attr("class").replace("design","") : '00'); this.option.duration = cover_duration; this.option.interval = cover_interval; this.option.length = $("#coverWrap img").length; this.option.viewWidth = $("#coverArea").width(); this.option.offset = $("#coverArea").outerWidth(); this.init(); $(window).off('resize', this.resizeHandler); $(window).on('resize', {obj:this}, this.resizeHandler); } ,start: function(){ this.init(); $(window).off('resize', this.resizeHandler); $(window).on('resize', {obj:this}, this.resizeHandler); window.bEffects = this; return this; } ,stop: function(){ clearTimeout(coverAutoID); coverAutoID = null; this.wrapper.stop(true).css({"margin-left": 0}); } ,playAuto: function(){ var _this = this; if(coverAutoID!=null){ this.stop(); } coverAutoID = setTimeout(function(){ _this.debug("playAuto::setTimeout();"); _this.showNext(); }, this.option.interval); } ,showNext: function(){ var _this = this; if(!_this.option.animation){ _this.option.animation = true; _this.wrapper.find("a:last>img").animate({"opacity": 0}, {duration: _this.option.duration, easing: _this.option.easing, complete: function(){ _this.position++; if(_this.option.length <= _this.position){ _this.position = 0; } _this.wrapper.find(">a:last").prependTo(_this.wrapper); _this.wrapper.find(">a:first>img").css({"opacity": 1}); _this.setNavigation(_this.position); _this.option.animation = false; _this.setImagePosition(); _this.playAuto(); _this.debug("showNext::complete();"); _this.debug("CURRENT="+_this.position); } }); } } ,showPrev: function(){ var _this = this; if(!_this.option.animation){ _this.option.animation = true; //透明にする _this.wrapper.find(">a:first>img").css({opacity: 0}); //前面に配置 _this.wrapper.find(">a:first").appendTo(_this.wrapper); //位置セット _this.setImagePosition(); //エフェクト開始 _this.wrapper.find(">a:last>img").animate({"opacity": 1}, {duration: _this.option.duration, easing: _this.option.easing, complete: function(){ _this.position--; if(_this.position < 0){ _this.position = (_this.option.length-1); } _this.setNavigation(_this.position); _this.option.animation = false; _this.playAuto(); _this.debug("CURRENT="+_this.position); } }); } } ,slideToPage: function(t){ var _this = this; if(!_this.option.animation){ clearTimeout(coverAutoID); //移動スライド数 var offset = t - this.position; //1ページ移動の時 if(Math.abs(offset) == 1){ if(offset == 1){ _this.showNext(); }else{ _this.showPrev(); } } //2ページ以上の時 else if(1 < Math.abs(offset) ){ _this.multiSlide(offset); } } } ,setPosition: function(p){ this.position = p; if(this.option.length <= this.position){ this.position = 0; } else if(this.position < 0){ this.position = (this.option.length-1); } } ,multiSlide: function(offset){ var _this = this; if(!_this.option.animation){ _this.option.animation = true; var len = Math.abs(offset); if(0 < offset){ var target_position = (_this.option.length-1)-offset; //一旦表示中以外全て非表示 _this.wrapper.find(">a").not(":last").find(">img").css({opacity:0}); //目標位置の画像だけ表示 _this.wrapper.find(">a:eq("+target_position+")>img").css({opacity:1}); //エフェクト開始 _this.wrapper.find("a:last>img").animate({"opacity": 0}, {duration: _this.option.duration, easing: _this.option.easing, complete: function(){ //順序入れ替え for(var i = 0; i < len; i++){ _this.wrapper.find(">a:last").prependTo(_this.wrapper); _this.position++; } //全て表示 _this.wrapper.find(">a").not(":last").find(">img").css({opacity:1}); //位置セット _this.setImagePosition(); if(_this.option.length <= _this.position){ _this.position = 0; } _this.setNavigation(_this.position); _this.option.animation = false; _this.playAuto(); _this.debug("showNext::complete();"); _this.debug("CURRENT="+_this.position); } }); }else if(offset < 0){ var tmp_position = _this.position; //一旦表示中以外全て非表示 $("#coverWrap").find(">a").not(":last").find(">img").css({opacity:0}); //順序入れ替え for(var i = 0; i < len; i++){ _this.wrapper.find(">a:first").appendTo(_this.wrapper); _this.wrapper.find(">a:last>img").css({"opacity": 0}); tmp_position--; } //位置セット _this.setImagePosition(); _this.wrapper.find("a:last>img").animate({"opacity": 1}, {duration: _this.option.duration, easing: _this.option.easing, complete: function(){ _this.wrapper.find(">a").not(":last").find(">img").css({"opacity": 1}); _this.position = tmp_position; if(_this.position < 0){ _this.position = (_this.option.length-1); } _this.option.animation = false; _this.setNavigation(_this.position); _this.playAuto(); } }); }else{ _this.option.animation = false; } } } ,setNavigation: function(pos){ $(".nav li a").removeClass("active"); $(".nav li a:eq("+pos+")").addClass("active"); } ,addNaviEvent: function(ev){ var _this = this; if(ev == "02"){ //丸ボタン var nav = $(".nav>ol>li>a"); //ナビのwidthを設定 var navWidth = 0; nav.each(function(){ navWidth += $(this).outerWidth() + parseInt($(this).parent().css("marginRight").replace("px", ""))+1; }); $(".nav").width(navWidth) //位置調整 $(".nav").css({"margin-left": -((13*_this.option.length)/2)}); //インデックスをセット nav.each(function(idx){ $(this).data({index:idx}); }) //イベント設定 $(".nav>ol>li>a").on('click', {obj:_this}, _this.naviEventHandler); }else if(ev == "03"){ //アロー $("#coverLeft, #coverRight").css({display: 'block'}); $("#coverLeft").on("click", {obj:_this}, _this.prevEventHandler); $("#coverRight").on("click", {obj:_this}, _this.nextEventHandler); } } ,removeNaviEvent: function(ev){ var _this = this; if(ev == "02"){ $(".nav>ol>li>a").off('click'); }else if(ev == "03"){ $("#coverLeft").off("click"); $("#coverRight").off("click"); } } ,naviEventHandler: function(e){ var _this = e.data.obj; _this.slideToPage($(this).data("index")); e.stopPropagation(); e.preventDefault(); } ,prevEventHandler: function(e){ var _this = e.data.obj; _this.showPrev(); e.stopPropagation(); e.preventDefault(); } ,nextEventHandler: function(e){ var _this = e.data.obj; _this.showNext(); e.stopPropagation(); e.preventDefault(); } //windowリサイズイベント ,resizeHandler: function(e){ var _this = e.data.obj; //windowか判定(IE対策) if(e.target.location){ clearTimeout(coverAutoID); _this.reset(); } } ,debug: function(mes){ if(this.option.debug){ if($("#logger").length==0){ $("body").append("
"+mes+"
") }else{ $("#logger").append("