//banner ;(function($){ $.fn.adaptiveRotation = function(options){ var defaults = { autoRotation:true,//是否开启自动轮播 time:5000, //轮播间隔 current: 'on', //标识当前的class名称 proportion:1920/600, //图片比例,宽度/高度 proportionMobile:800/450, //手机图片比例,宽度/高度 Resolution:1024, //区分PC移动分辨率节点 isOtaku:false, //左右箭头是否外翻 bannerBox: '.banner-box', //限制banner宽高的div bannerList: '.banner-list', //图片集的ul bannerImg:'.banner-img', //图片的li currentClass:'.banner-img.on', //图片的li preBtn: '.pre-btn', //上一张图片的按钮 nextBtn:'.next-btn', //下一张图片的按钮 bannerPrint:'.banner-print', //生成小点点的div bannerPrintHtml:"||on", //生成小点点代码 expand_textbox: ".expand-textbox", //移动端拓展块,用来处理移动端banner上图下文(文字在图片下方不遮住图片的情况),此处是文字块的class beforeFun : '', afterFun:'', notSetHeight:false,//不用设置height whiteClass:"banner-while-font", whiteBoxClass:"banner-while", resetOrderCallback:null }; var opts = $.extend(defaults, options); var global_this = $(this); var autoRotation = opts.autoRotation; var time = opts.time; var on = opts.current; var whiteClass=opts.whiteClass; var whiteBoxClass=opts.whiteBoxClass; var resetOrderCallback = opts.resetOrderCallback; var proportion = opts.proportion; var proportionMobile = opts.proportionMobile; var Resolution = opts.Resolution; var isOtaku = opts.isOtaku; var bannerPrintHtml = opts.bannerPrintHtml; var bannerBox = global_this.find(opts.bannerBox); var bannerList = global_this.find(opts.bannerList); var bannerImg = global_this.find(opts.bannerImg); var preBtn = $("html").hasClass("LANG-sa")?global_this.find(opts.nextBtn):global_this.find(opts.preBtn); var nextBtn = $("html").hasClass("LANG-sa")?global_this.find(opts.preBtn):global_this.find(opts.nextBtn); var bannerPrint = global_this.find(opts.bannerPrint); var expand_textbox = global_this.find(opts.expand_textbox); var window_width = $(window).width(), bannerBox_width = bannerBox.width(), //用来存放当前的显示宽度 bannerBox_height = 0, //用来存放显示区域的高度 on_key = 0, //用来存放当前显示的图片key img_src = "", img_num = bannerImg.length, //用来存放图片的个数 setInterval_key = 0, //存放自动轮播的key max_textHeight = 0, //存放文本框中最大高度 print_on = "on", //存放轮播到当前的点点点的class,默认是on sport_status = false; //动画状态,true=正在执行动画,false=当前无执行动画 //初始化 var refresh = function(){ var $current = global_this.find(opts.currentClass); if($current.length&&$current.hasClass(whiteClass)){ bannerBox.addClass(whiteBoxClass); }else{ bannerBox.removeClass(whiteBoxClass); } window_width = $(window).width(); //获取浏览器窗口宽度 bannerBox_width = bannerBox.width(); //获取banner显示区域的宽度 if(opts.beforeFun != ''){ opts.beforeFun(); } if(window_width <= Resolution){ //移动端 显示移动端的banner图片 for(var i=0; i < img_num; i++){ img_src = bannerImg.eq(i).find("img").eq(0); img_src.attr("src",img_src.data("wapsrc")); } //判断是否存在拓展块 if(expand_textbox.length > 0){ var textbox_height = 0; expand_textbox.outerHeight("auto"); for(var i=0; i < img_num; i++){ textbox_height = expand_textbox.eq(i).outerHeight(); if(i == 0) max_textHeight = textbox_height; else if(max_textHeight < textbox_height) max_textHeight = textbox_height; } expand_textbox.outerHeight(max_textHeight); //设置所有块的高度统一为最大高的高度 bannerPrint.css({ "top": parseInt(bannerBox_width / proportionMobile) - 30, "bottom": "auto" }); } nextBtn.hide();preBtn.hide(); //移动端隐藏左右箭头 bannerBox_height = parseInt(bannerBox_width / proportionMobile) + max_textHeight; //按比例计算出显示区域的高度 }else{ //PC 显示PC端的banner图片 for(var i=0; i < img_num; i++){ img_src = bannerImg.eq(i).find("img").eq(0); // 判断是否是IE8,如果是,首页banenr背景图换了(首页个性化,如果效果删了,可以删掉这段代码) if ((baseLib.browserVersion()==6 || baseLib.browserVersion()==7 || baseLib.browserVersion()==8 || baseLib.browserVersion()==0) && img_src.data("pcsrcie8") != '' ) { var ie8Img = $('.banner-block .index-banner-text .pic img').data('pcsrcie8'); //alert(ie8Img) $('.banner-block .index-banner-text .pic img').attr('src',ie8Img); img_src.attr("src",img_src.data("pcsrc")); }else { img_src.attr("src",img_src.data("pcsrc")); } } bannerBox_height = parseInt(bannerBox_width / opts.proportion); //按比例计算出显示区域的高度 if (expand_textbox.length > 0) { expand_textbox.height("auto"); bannerPrint.css({ "top": "auto", "bottom": 0 }); } if(isOtaku){ //判断左右箭头是否外翻 global_this.css("position","relative"); } nextBtn.show();preBtn.show(); //PC端显示左右箭头 } on_key = bannerList.find("."+on).index(); //获取当前显示的图片key if(!opts.notSetHeight){ bannerBox.height(bannerBox_height); //设置显示区域的高度 bannerList.height(bannerBox_height); ////设置ul的高度 } bannerList.width(bannerBox_width); //设置ul的宽度 //根据轮播的数量做特殊的判断 switch(img_num){ case 1:nextBtn.hide();preBtn.hide();sport_status = true;bannerPrint.hide();break; case 2:break; default:bannerImg.eq(on_key-1).addClass("pre");bannerImg.eq(on_key+1).addClass("next");break; } if(typeof opts.afterFun =="function"){ opts.afterFun(); } }; refresh(); //生成点点点 var generatePriont = function(){ var priont_html = ""; var priont_hmtattr = bannerPrintHtml.split("|"); print_on = priont_hmtattr[2]; if(priont_hmtattr.length != 3){ alert("bannerPrintHtml 参数不规范,请重新调整参数!"); return false; } for(var i = 0; i < img_num; i++){ if(i == on_key) priont_html += priont_hmtattr[1]; else priont_html += priont_hmtattr[0]; } bannerPrint.html(priont_html); }; generatePriont(); //点击下一张事件 nextBtn.on("click",function(){ if(img_num == 2){ bannerImg.eq(on_key).siblings().addClass("next"); } if(!sport_status){ sport_status = true; if(autoRotation) clearTimeout(setInterval_key); beforeResetOrder(bannerList.find(".next").index()); if($("html").hasClass("LANG-sa")){ bannerList.animate({marginRight:-bannerBox_width},400,function(){ resetOrder(global_this.find(".next").index(),"click"); }); }else{ bannerList.animate({marginLeft:-bannerBox_width},400,function(){ resetOrder(global_this.find(".next").index(),"click"); }); } } }); //点击上一张事件 preBtn.on("click",function(){ if(img_num == 2){ bannerImg.eq(on_key).siblings().addClass("pre"); } if(!sport_status){ sport_status = true; if(autoRotation) clearTimeout(setInterval_key); beforeResetOrder(bannerList.find(".pre").index()); if($("html").hasClass("LANG-sa")){ bannerList.animate({marginRight:bannerBox_width},400,function(){ resetOrder(global_this.find(".pre").index(),"click"); }); }else{ bannerList.animate({marginLeft:bannerBox_width},400,function(){ resetOrder(global_this.find(".pre").index(),"click"); }); } } }); //为生成的小点点添加事件 bannerPrint.on("click","span",function(){ var click_key = $(this).index(); if(!sport_status){ if(click_key > on_key){ bannerImg.eq(click_key).addClass("next").removeClass("pre").siblings().removeClass("next"); nextBtn.trigger("click"); } if(click_key < on_key){ bannerImg.eq(click_key).addClass("pre").removeClass("next").siblings().removeClass("pre"); preBtn.trigger("click"); } } }); //判断是否加入自动轮播 var autoRotation_function = function(){ if(autoRotation){ if(img_num > 1){ clearTimeout(setInterval_key); setInterval_key = setTimeout(function(){ sport_status = true; if(img_num == 2) bannerImg.eq(on_key).siblings().addClass("next"); beforeResetOrder(bannerList.find(".next").index()); if($("html").hasClass("LANG-sa")){ bannerList.animate({marginRight:-bannerBox_width},400,function(){ resetOrder(global_this.find(".next").index(),"auto"); autoRotation_function(); }); }else{ bannerList.animate({marginLeft:-bannerBox_width},400,function(){ resetOrder(global_this.find(".next").index(),"auto"); autoRotation_function(); }); } },time); } } }; autoRotation_function(); //动画执行之前 var beforeResetOrder = function(now_key){ if(bannerImg.eq(now_key).hasClass(whiteClass)){ bannerBox.addClass(whiteBoxClass); }else{ bannerBox.removeClass(whiteBoxClass); } } //动画执行后重置序列 var resetOrder = function(now_key,style){ bannerImg.eq(now_key).addClass(on).siblings().removeClass(on); bannerPrint.find("span").eq(now_key).addClass(print_on).siblings().removeClass(print_on); on_key = bannerList.find("."+on).index(); if(img_num == 2){ bannerImg.removeClass("next").removeClass("pre"); }else{ if(now_key+1 >= img_num){ bannerImg.eq(0).addClass("next").siblings().removeClass("next"); }else{ bannerImg.eq(now_key+1).addClass("next").siblings().removeClass("next"); } bannerImg.eq(now_key-1).addClass("pre").siblings().removeClass("pre"); } if(typeof resetOrderCallback=="function"){ resetOrderCallback(now_key); } if($("html").hasClass("LANG-sa")){ bannerList.css("margin-right",0); }else{ bannerList.css("margin-left",0); } sport_status = false; if(style == "click") autoRotation_function(); }; //页面窗口发生改变时重新初始化 $(window).resize(function(){ refresh(); }); //以下开始移动端触摸事件处理 if (window.addEventListener) { var obj = bannerList[0]; var touch_startX = 0; //存放刚开始点击屏幕的X坐标 var touch_startY = 0; //存放刚开始点击屏幕的Y坐标 var touch_endX = 0; //存放点击移动结束X的坐标 var touch_endY = 0; //存放点击移动结束Y的坐标 var touch_distanceX = 0; //存放移动的横向距离 var touch_distanceY = 0; //存放移动的纵向距离 var nowScroll = 0; var gesture_Staus = 0; //判断手势状态0为初始,1位X,2为Y if(img_num > 1){ obj.addEventListener('touchstart', function(event) { // 如果这个元素的位置内只有一个手指的话 if (event.targetTouches.length == 1) { event.stopPropagation(); var touch = event.targetTouches[0]; touch_startX = touch.clientX; touch_startY = touch.clientY; touch_endX = touch.clientX; touch_endY = touch.clientY; nowScroll = $("body").scrollTop(); gesture_Staus = 0; if(autoRotation) clearTimeout(setInterval_key); } }, false); obj.addEventListener('touchmove', function(event) { // 如果这个元素的位置内只有一个手指的话 if (event.targetTouches.length == 1) { event.preventDefault(); var touch = event.targetTouches[0]; touch_endX = touch.clientX; touch_endY = touch.clientY; touch_distanceX = $("html").hasClass("LANG-sa")?(touch_startX-touch_endX):(touch_endX - touch_startX); touch_distanceY = touch_endY - touch_startY; if(!sport_status){ if(img_num == 2){ if(touch_distanceX > 0) bannerImg.eq(on_key).siblings().addClass("pre").removeClass("next"); else bannerImg.eq(on_key).siblings().addClass("next").removeClass("pre"); } switch(gesture_Staus){ case 0: if(Math.abs(touch_distanceY) > Math.abs(touch_distanceX)*1.5){ gesture_Staus = 2; }else{ gesture_Staus = 1; } break; case 1: if($("html").hasClass("LANG-sa")){ obj.style.marginRight = touch_distanceX + "px"; }else{ obj.style.marginLeft = touch_distanceX + "px"; } break; case 2: $("body").scrollTop(nowScroll - touch_distanceY); break; } } } }, false); obj.addEventListener('touchend', function(event) { touch_distanceX = $("html").hasClass("LANG-sa")?( touch_startX-touch_endX):(touch_endX - touch_startX); if (gesture_Staus == 1) { if (Math.abs(touch_distanceX) < 120) { if($("html").hasClass("LANG-sa")){ bannerList.animate({ "marginRight": 0 }, 100); }else{ bannerList.animate({ "marginLeft": 0 }, 100); } if (autoRotation) autoRotation_function(); } else { if (!sport_status) { sport_status = true; if (touch_distanceX < 0) { beforeResetOrder(bannerList.find(".next").index()) if($("html").hasClass("LANG-sa")){ bannerList.animate({ "marginRight": -bannerBox_width }, 100, function () { resetOrder(bannerList.find(".next").index(), "click"); }); }else{ bannerList.animate({ "marginLeft": -bannerBox_width }, 100, function () { resetOrder(bannerList.find(".next").index(), "click"); }); } } else { beforeResetOrder(bannerList.find(".pre").index()); if($("html").hasClass("LANG-sa")){ bannerList.animate({ "marginRight": bannerBox_width }, 200, function () { resetOrder(bannerList.find(".pre").index(), "click"); }); }else{ bannerList.animate({ "marginLeft": bannerBox_width }, 200, function () { resetOrder(bannerList.find(".pre").index(), "click"); }); } } } else { if (autoRotation) autoRotation_function(); } } } }, false); } } }; })(jQuery);