//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);