;(function ($) { var methods = { /***ajax 提交表单***/ submit: function (options) { if(!this.length || this.hasClass('default-slider-2')){ return false; } var op = options ? options : function(e){}; this.submit(function(){ $.ajax({ url: this.action, type: this.method, data: $(this).serialize(), dataType: "json", success: function(e){ showmessage(e,function(){ op(e.data); }); } }); return false; }); } /***元素相对父元素垂直居中***/ ,verticalCenter: function (options) { if(!this.length){ return false; } var op = $.extend({ parentHeight : $_Y['height'], style : 'paddingTop' },options); var $this = this; var $img = $this.find('img'); var imgl = $this.find('img').length; var h; if(imgl > 0){ //判断图片有没有缓存 $img.each(function(){ if($(this).height()){ imgl--; } else { //兼容jQuery 3.7 // $(this).load(function(){ $(this).on('load',function(){ imgl--; }); } }); } else { imgl = 0; h = $this.outerHeight(true); } var t = setInterval(function(){ if(!imgl){ h = $this.outerHeight(true); clearInterval(t); var top = (op.parentHeight-h)/2; $this.css(op.style,top); } },300); } /*** *功能:幻灯片 *注意事项: * 1、轮播元素一定是选择器下的直属 'ul > li' ***/ ,slider: function (options) { if(!this.length || this.hasClass('default-slider-2')){ return false; } /*幻灯片元素不可见情况下 禁止执行*/ if(this.is(":hidden")){ return false; } var op = $.extend({ effect : "show" //show(移动) fadeIn(淡入淡出) ,direction : "right" //left right up down ,linear : "easeInOutQuint" //线性参数 ,speed : 500 //移动速度 ,interval : 2000 //播放间隔 ,distance : 0 //单次滚动距离 默认滚动一个子元素 ,autoPlay : 1 //是否自动播放 ,hoverStop : 1 //鼠标经过图片是否停止播放 ,isSingle : 1 //是否单张轮播模式 ,isButton : 1 //是否显示前后按钮 ,isDots : 1 //是否显示点 ,isMousewheel : 0 //是否鼠标滚轮触控 ,isThumb : 0 //是否显示缩略图 ,thumbNum : 3 //是否显示缩略图 ,thumbHeight : 80 //缩略图高度 默认80 ,thumbWidth : 150 //缩略图宽度 默认150 ,thumbOptions : {} }, options); /*覆盖值*/ //如果选择显示缩略图的话 就不能显示点 也不自动播放 if(op.isThumb){ op.isDots = 0; op.autoPlay = 0; } //如果是手机版就强制 effect 为 show if($_Y.ismobile || $('body').hasClass('ismobile')){ //$_Y.ismobile = true; //这一句会影响到 global.js 里面 rezise 事件里面获取不到正确的 ismobile 值 rao 20211018 op.effect = 'show'; } this.html('
'+this.html()+'
'); var $this = this; if($this.children('.default-slider-box').length > 0){ var $box = $this.children('.default-slider-box'); } else { return false; } if($box.children('ul').length > 0){ var $ul = $box.children('ul'); } else { return false; } if($ul.children('li').length > 0){ var $li = $ul.children('li'), liLength = $li.length, thisWidth = $this.width(); thisHeight = $this.height(); } else { return false; } //PC端下改变浏览器大小,幻灯片也进行宽度兼容(移动端无效) rao 20211018 $(window).resize(function(){ if(!$_Y.ismobile){ thisWidth = $this.width(); $li.width(thisWidth); } }) //遍历 li 获取值 var ulWidth = !$this.hasClass("thumb") ? 0 : $ul.width() //实际ul 宽度 ,ulHeight = !$this.hasClass("thumb") ? 0 : $ul.height() //实际ul 宽度 ,maxheight = 0 //最大的li 高度 ,maxwidth = 0 //最大的li 宽度 ,dotshtml = '' //dots 的 html ,thumbHtml = '' ,thumbItemHtml = ''; /**根据参数写插入 类**/ //盒类 $this.addClass('default-slider-2'); //要把 -2 去掉 //横向类 if(op.direction == 'left' || op.direction == 'right'){ $this.addClass('default-slider-direction-left'); //如果效果为移动 if(op.effect == 'show'){ $ul.addClass('cl'); } } if(op.isSingle){ $this.addClass('default-slider-single'); if(op.direction == 'left' || op.direction == 'right'){ $li.width(thisWidth); } else if(op.direction == 'up' || op.direction == 'down') { $li.width(thisHeight); } } //$('img').lazyload(); $li.each(function(index){ //横向 show 获取总宽度 var $thisLi = $(this); if(op.isSingle){ //$li.find('img').css({'marginLeft':-($(this).find('img').width()/2)}); if($thisLi.find('img').height() > 0){ $thisLi.find('img').css({'marginLeft':-($thisLi.find('img').width()/2)}); } else { // 兼容 jQuery 3.7 // $thisLi.find('img').load(function(){ $thisLi.find('img').on('load',function(){ $thisLi.find('img').css({'marginLeft':-($thisLi.find('img').width()/2)}); if(op.direction == 'left' || op.direction == 'right'){ maxheight = Math.max(maxheight, $thisLi.outerHeight(true)); $ul.css({height:maxheight}); } }); } } if(!$this.hasClass("thumb") && op.effect == 'show' && (op.direction == 'left' || op.direction == 'right')){ ulWidth += $thisLi.outerWidth(true); } else if(!$this.hasClass("thumb") && (op.direction == 'up' || op.direction == 'down')){ ulHeight += $thisLi.outerHeight(true); } // 效果为 fadeIn 设置第一张可见和设置盒子为最高 li 高度 if(op.effect == 'fadeIn'){ if(index == 0){ $thisLi.css({display:'block'}); } } if(op.direction == 'left' || op.direction == 'right'){ maxheight = Math.max(maxheight, $thisLi.outerHeight(true)); } if(op.direction == 'up' || op.direction == 'down'){ maxwidth = Math.max(maxwidth, $thisLi.outerWidth(true)); } //如果显示点并且默认移动单位 if(op.isDots && !op.distance){ var dotclass = (index == 0) ? 'class="active"' : ''; dotshtml += ''+(index+1)+''; } //如果显示缩略图 if(op.isThumb){ var dataOriginal = $thisLi.find('img').attr('_src'); thumbItemHtml += '
  • '; } }); //如果横向 if(op.direction == 'left' || op.direction == 'right'){ $ul.css({height:maxheight}); //如果效果为移动 if(op.effect == 'show'){ if(ulWidth < thisWidth){ $ul.css({width:Math.ceil(thisWidth/ulWidth)*ulWidth*2}); var _ulHtml = ''; for(i=1;i<=Math.ceil(thisWidth/ulWidth);i++){ _ulHtml += $box.children('ul').html(); } $ul.html(_ulHtml); $ul.css({width:ulWidth*Math.ceil(thisWidth/ulWidth)*2}); } else { $ul.css({width:ulWidth*2}); } } } else if(op.direction == 'up' || op.direction == 'down'){ op.effect = 'show'; $ul.css({width:maxwidth}); if(ulHeight < thisHeight){ $ul.css({height:Math.ceil(thisHeight/ulHeight)*ulHeight*2}); var _ulHtml = ''; for(i=1;i<=Math.ceil(thisHeight/ulHeight);i++){ _ulHtml += $box.children('ul').html(); } $ul.html(_ulHtml); $ul.css({height:ulHeight*Math.ceil(thisHeight/ulHeight)*2}); } else { $ul.css({height:ulHeight*2}); } } //用于插入 var ulHtml = $($box.children('ul').html()); //这一句要注意下 看是不是需要重新检查 $li = $ul.children('li'); //如果淡入淡出 //设置 ul 的高度 貌似 应该还有其他条件可以满足 if(op.effect == 'fadeIn'){ $this.addClass('default-slider-effect-fadeIn'); } //如果显示按钮 if(op.isButton){ $this.append(''); } //如果显示点 if(op.isDots){ if(op.distance){ dotshtml += '1'; if(op.direction == 'left' || op.direction == 'right'){ dotsunm = Math.ceil(ulWidth/op.distance); } else if(op.direction == 'up' || op.direction == 'down'){ dotsunm = Math.ceil(ulHeight/op.distance); } for(i=2;i<=dotsunm;i++){ dotshtml += ''+i+''; } } $this.append('
    '+dotshtml+'
    '); } //如果显示缩略图 if(op.isThumb){ thumbHtml = '
    '; $this.append(thumbHtml); var $thumb = $this.children('.thumb'); //var $thumbBox = $thumb.children(''); op.thumbNum = liLength < op.thumbNum ? $li.length : op.thumbNum; var thumbLiwidth = $thumb.children('ul').children('li').outerWidth(true)+op.thumbWidth-($thumb.children('ul').children('li').find('img').width()); var thumbWidth = thumbLiwidth*op.thumbNum; $thumb.width(thumbWidth); $thumb.children('ul').width(thumbLiwidth*liLength); $thumb.css({'marginLeft':-((thumbWidth/2)+15)}); /* if(op.thumbNum < li.length){ thumb.append(''); } */ //缩略图幻灯片 var thumbSliderData = $.extend({ effect : "show" //show(移动) fadeIn(淡入淡出) ,direction : op.direction //left right up down ,linear : op.linear //线性参数 ,speed : op.speed //移动速度 ,interval : 3000 //播放间隔 //,distance : thumbWidth ,isSingle : 0 //是否单张轮播模式 ,isDots : 0 //是否显示点 ,isThumb : 0 //是否显示缩略图 }, op.thumbOptions); $thumb.taiduyun('slider',thumbSliderData); } var direction = op.direction; //自动播放 if(op.autoPlay){ var autoplay = setInterval(_left(direction),op.interval); } //左点击事件 $this.find('.prev').click(function(){ clearInterval(autoplay); left('left'); direction = 'left'; }); //右点击事件 $this.find('.next').click(function(){ clearInterval(autoplay); direction = 'right'; left(direction); }); //鼠标滚轮事件 if(op.isMousewheel){ $this.bind('mousewheel', function(event, delta){ if(delta < 0){ $this.find('.next').click(); } else { $this.find('.prev').click(); } }); } //手机端滑动幻灯片事件 var touch_i = 0; var touch_distance = 0; //开始滑屏 if(window.addEventListener){ $this[0].addEventListener('touchstart',function( e ){ touch_i = e.targetTouches[0].clientX; clearInterval(autoplay); },false); //滑屏过程 $this[0].addEventListener('touchmove',function( e ){ touch_distance = e.targetTouches[0].clientX - touch_i; if(touch_distance < -10 || touch_distance > 10){ e.preventDefault(); } else { e.returnValue = true; } },false); //滑屏结束 $this[0].addEventListener('touchend',function( e ){ if(touch_distance > 30){ console.log(touch_distance); left('left'); } else if (touch_distance < 30) { console.log(touch_distance); left('right'); } if(op.autoPlay){ autoplay = setInterval(_left(direction),op.interval); } },false); } //经过高亮点 $this.children('.dots').children('span').mouseover(function(){ clearInterval(autoplay); var toindex = $(this).index(); left(direction,toindex); }); //经过盒子 $this.hover(function(){ if(op.hoverStop){ clearInterval(autoplay); } },function(){ if(op.autoPlay){ autoplay = setInterval(_left(direction),op.interval); } }); //点击缩略图事件 $this.on('click','.thumb ul li',function(){ left(direction,$(this).index()%$li.length); }); //封装移动函数给计时器传参 function _left(_name){ return function(){ left(_name); } } //横向移动函数 function left(direction,toindex){ var active,actionLi; $ul = $box.children('ul'); $li = $ul.children('li'); setTimeout(function(){ $li.find('img').lazyload(); },300); if(op.effect == 'show'){ if(direction == 'left' || direction == 'right'){ var thisLeft = $box.offset().left ,ulLeft = $ul.offset().left ,ulMarginLeft = parseInt($ul.css('marginLeft')); } else { //向上 var thisTop = $box.offset().top ,ulTop = $ul.offset().top ,ulMarginTop = parseInt($ul.css('marginTop')); } if(typeof(toindex)=="undefined" && direction == 'left' && ulMarginLeft >= 0){ prevWidth = $li.last().outerWidth(true); $ul.prepend(ulHtml); $ul.css({'marginLeft':-(ulWidth)}); ulMarginLeft = ulMarginLeft-ulWidth; $ul = $box.children('ul'); $li = $ul.children('li'); } else if ((typeof(toindex) != "undefined" && (direction == 'right' || direction == 'left')) || (direction == 'right' && $li.last().offset().left <= thisLeft+thisWidth)){ $ul.append(ulHtml); if(typeof(toindex) != "undefined"){ if(op.distance){ $ul.stop().animate({marginLeft:-((op.distance-1)*toindex)+'px'},op.speed,op.linear); } else { $ul.stop().animate({marginLeft:-($li.eq(toindex).offset().left-ulLeft)+'px'},op.speed); } $this.children('.dots').children('span').eq(toindex).addClass('active').siblings().removeClass('active'); return false; } if(ulMarginLeft <= -ulWidth){ ulMarginLeft = ulMarginLeft + ulWidth; } $ul = $box.children('ul'); $li = $ul.children('li'); $ul.css({'marginLeft':ulMarginLeft+'px'}); } else if (typeof(toindex) != "undefined" || (direction == 'up' && ($li.last().offset().top <= (thisTop+thisHeight)))){ $ul.append(ulHtml); if(typeof(toindex) != "undefined"){ if(op.distance){ $ul.stop().animate({marginTop:-((op.distance-1)*toindex)+'px'},op.speed,op.linear); } else { $ul.stop().animate({marginTop:-($li.eq(toindex).offset().top-ulTop)+'px'},op.speed); } $this.children('.dots').children('span').eq(toindex).addClass('active').siblings().removeClass('active'); return false; } if(ulMarginTop <= -ulHeight){ ulMarginTop = ulMarginTop + ulHeight; } $ul = $box.children('ul'); $li = $ul.children('li'); $ul.css({'marginTop':ulMarginTop+'px'}); } $li.each(function(index){ if(direction == 'left' || direction == 'right'){ if(op.isSingle && $(this).find('img').css("marginLeft") == '0px'){ $(this).find('img').css({"marginLeft":-($(this).find('img').width()/2)}); } thisLiLeft = $(this).offset().left; thisLiWidth = $(this).outerWidth(true); } else { //向上 if(op.isSingle && $(this).find('img').css("marginTop") == '0px'){ $(this).find('img').css({"marginTop":-($(this).find('img').height()/2)}); } thisLiTop = $(this).offset().top; thisLiHeight = $(this).outerHeight(true); } if(direction == 'left'){ if(thisLiLeft+thisLiWidth > thisLeft){ if(op.distance){ var oldactive = $this.children('.dots').children('span.active'); if(oldactive.index() == 0){ $this.children('.dots').children('span').last().addClass('active').siblings().removeClass('active'); } else { oldactive.removeClass('active').prev().addClass('active'); } $ul.stop().animate({marginLeft:(ulMarginLeft+op.distance)+'px'},op.speed,op.linear); $(this).click(); } else { prevWidth = $(this).prev().outerWidth(true); active = (index >= liLength) ? (index-liLength) :index ; active = (active == 0) ? liLength-1 : active-1; $this.children('.dots').children('span').eq(active).addClass('active').siblings().removeClass('active'); $ul.stop().animate({marginLeft:(ulMarginLeft+prevWidth)+'px'},op.speed,op.linear); $(this).click(); } return false; } } else if(direction == 'right'){ if(thisLiLeft >= thisLeft+thisWidth){ if(op.distance){ var oldactive = $this.children('.dots').children('span.active'); if(oldactive.index() == $this.children('.dots').children('span').length-1){ $this.children('.dots').children('span').first().addClass('active').siblings().removeClass('active'); } else { oldactive.removeClass('active').next().addClass('active'); } $ul.stop().animate({marginLeft:(ulMarginLeft-op.distance)+'px'},op.speed,op.linear); $(this).click(); } else { active = index >= liLength ? index%liLength : index; $this.children('.dots').children('span').eq(active).addClass('active').siblings().removeClass('active'); $ul.stop().animate({marginLeft:(ulMarginLeft-$(this).outerWidth(true))+'px'},op.speed,op.linear); $(this).click(); } return false; } }else if(direction == 'up'){ if(thisLiTop >= thisTop+thisHeight){ if(op.distance){ var oldactive = $this.children('.dots').children('span.active'); if(oldactive.index() == $this.children('.dots').children('span').length-1){ $this.children('.dots').children('span').first().addClass('active').siblings().removeClass('active'); } else { oldactive.removeClass('active').next().addClass('active'); } $ul.stop().animate({marginTop:(ulMarginTop-op.distance)+'px'},op.speed,op.linear); $(this).click(); } else { active = index >= liLength ? index%liLength : index; $this.children('.dots').children('span').eq(active).addClass('active').siblings().removeClass('active'); $ul.stop().animate({marginTop:(ulMarginTop-$(this).outerHeight(true))+'px'},op.speed,op.linear); $(this).click(); } return false; } } }); } else if(op.effect == 'fadeIn') { if(typeof(toindex) != "undefined"){ $actionLi = $li.eq(toindex); active = toindex; } else { $li.each(function(index){ if(!$(this).is(":hidden")){ if( direction == 'left' ){ $actionLi = index == 0 ? actionLi = $li.last() :$ (this).prev(); active = (index == 0) ? liLength-1 : index-1; } else if( direction == 'right' ){ $actionLi = index == liLength-1 ? actionLi = $li.first() : actionLi = $(this).next(); active = (index == liLength-1) ? 0 : index+1; } return false; } }); } //当前显示的元素加 active_b 类 $actionLi.fadeIn(op.speed).addClass('active_b').siblings().removeClass('active_b').fadeOut(op.speed); $this.children('.dots').children('span').eq(active).addClass('active').siblings().removeClass('active'); } } } ,init: function(){ alert('请填写 taiduyun 的第一个参数为指定方法'); } }; $.fn.taiduyun = function (method) { // 方法调用 if (methods[method]) { return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); } else if (typeof method === 'object' || !method) { return methods.init.apply(this, arguments); } else { $.error('Method ' + method + ' does not exist on jQuery.tooltip (' + method + ' 方法不存在)'); } }; })(jQuery);