/** * creates a carousel-style navigation widget for images/any-content from a simple html markup. * * the html markup that is used to build the carousel can be as simple as... * * * * as you can see, this snippet is nothing but a simple div containing an unordered list of images. * you don't need any special "class" attribute, or a special "css" file for this plugin. * i am using a class attribute just for the sake of explanation here. * * to navigate the elements of the carousel, you need some kind of navigation buttons. * for example, you will need a "previous" button to go backward, and a "next" button to go forward. * this need not be part of the carousel "div" itself. it can be any element in your page. * lets assume that the following elements in your document can be used as next, and prev buttons... * * * * * now, all you need to do is call the carousel component on the div element that represents it, and pass in the * navigation buttons as options. * * $(".carousel").xyscroll({ * btnnext: ".next", * btnprev: ".prev" * }); * * that's it, you would have now converted your raw div, into a magnificient carousel. * * there are quite a few other options that you can use to customize it though. * each will be explained with an example below. * * @param an options object - you can specify all the options shown below as an options object param. * * @option btnprev, btnnext : string - no defaults * @example * $(".carousel").xyscroll({ * btnnext: ".next", * btnprev: ".prev" * }); * @desc creates a basic carousel. clicking "btnprev" navigates backwards and "btnnext" navigates forward. * * @option btngo - array - no defaults * @example * $(".carousel").xyscroll({ * btnnext: ".next", * btnprev: ".prev", * btngo: [".0", ".1", ".2"] * }); * @desc if you don't want next and previous buttons for navigation, instead you prefer custom navigation based on * the item number within the carousel, you can use this option. just supply an array of selectors for each element * in the carousel. the index of the array represents the index of the element. what i mean is, if the * first element in the array is ".0", it means that when the element represented by ".0" is clicked, the carousel * will slide to the first element and so on and so forth. this feature is very powerful. for example, i made a tabbed * interface out of it by making my navigation elements styled like tabs in css. as the carousel is capable of holding * any content, not just images, you can have a very simple tabbed navigation in minutes without using any other plugin. * the best part is that, the tab will "slide" based on the provided effect. :-) * * @option mousewheel : boolean - default is false * @example * $(".carousel").xyscroll({ * mousewheel: true * }); * @desc the carousel can also be navigated using the mouse wheel interface of a scroll mouse instead of using buttons. * to get this feature working, you have to do 2 things. first, you have to include the mouse-wheel plugin from brandon. * second, you will have to set the option "mousewheel" to true. that's it, now you will be able to navigate your carousel * using the mouse wheel. using buttons and mousewheel or not mutually exclusive. you can still have buttons for navigation * as well. they complement each other. to use both together, just supply the options required for both as shown below. * @example * $(".carousel").xyscroll({ * btnnext: ".next", * btnprev: ".prev", * mousewheel: true * }); * * @option auto : number - default is null, meaning autoscroll is disabled by default * @example * $(".carousel").xyscroll({ * auto: 800, * speed: 500 * }); * @desc you can make your carousel auto-navigate itself by specfying a millisecond value in this option. * the value you specify is the amount of time between 2 slides. the default is null, and that disables auto scrolling. * specify this value and magically your carousel will start auto scrolling. * * @option speed : number - 200 is default * @example * $(".carousel").xyscroll({ * btnnext: ".next", * btnprev: ".prev", * speed: 800 * }); * @desc specifying a speed will slow-down or speed-up the sliding speed of your carousel. try it out with * different speeds like 800, 600, 1500 etc. providing 0, will remove the slide effect. * * @option easing : string - no easing effects by default. * @example * $(".carousel").xyscroll({ * btnnext: ".next", * btnprev: ".prev", * easing: "bounceout" * }); * @desc you can specify any easing effect. note: you need easing plugin for that. once specified, * the carousel will slide based on the provided easing effect. * * @option vertical : boolean - default is false * @example * $(".carousel").xyscroll({ * btnnext: ".next", * btnprev: ".prev", * vertical: true * }); * @desc determines the direction of the carousel. true, means the carousel will display vertically. the next and * prev buttons will slide the items vertically as well. the default is false, which means that the carousel will * display horizontally. the next and prev items will slide the items from left-right in this case. * * @option circular : boolean - default is true * @example * $(".carousel").xyscroll({ * btnnext: ".next", * btnprev: ".prev", * circular: false * }); * @desc setting it to true enables circular navigation. this means, if you click "next" after you reach the last * element, you will automatically slide to the first element and vice versa. if you set circular to false, then * if you click on the "next" button after you reach the last element, you will stay in the last element itself * and similarly for "previous" button and first element. * * @option visible : number - default is 3 * @example * $(".carousel").xyscroll({ * btnnext: ".next", * btnprev: ".prev", * visible: 4 * }); * @desc this specifies the number of items visible at all times within the carousel. the default is 3. * you are even free to experiment with real numbers. eg: "3.5" will have 3 items fully visible and the * last item half visible. this gives you the effect of showing the user that there are more images to the right. * * @option start : number - default is 0 * @example * $(".carousel").xyscroll({ * btnnext: ".next", * btnprev: ".prev", * start: 2 * }); * @desc you can specify from which item the carousel should start. remember, the first item in the carousel * has a start of 0, and so on. * * @option scrool : number - default is 1 * @example * $(".carousel").xyscroll({ * btnnext: ".next", * btnprev: ".prev", * scroll: 2 * }); * @desc the number of items that should scroll/slide when you click the next/prev navigation buttons. by * default, only one item is scrolled, but you may set it to any number. eg: setting it to "2" will scroll * 2 items when you click the next or previous buttons. * * @option beforestart, afterend : function - callbacks * @example * $(".carousel").xyscroll({ * btnnext: ".next", * btnprev: ".prev", * beforestart: function(a) { * alert("before animation starts:" + a); * }, * afterend: function(a) { * alert("after animation ends:" + a); * } * }); * @desc if you wanted to do some logic in your page before the slide starts and after the slide ends, you can * register these 2 callbacks. the functions will be passed an argument that represents an array of elements that * are visible at the time of callback. * * * @cat plugins/image gallery * @author ganeshji marwaha/ganeshread@gmail.com */ (function($) { /** * 去html代码,并判断元素类型,当元素是可输入元素(input,textarea)时同时去左右空格 * 默认可输入元素加类名trim自动加载该功能 */ $.fn.xystriphtml = function(o){ o = $.extend({}, o || {}); return this.each(function(){ switch($(this).prop('tagname')){ case 'input': case 'textarea': $(this).val($.trim($(this).val().replace(/<[^>]+>/g,''))).blur(function(){$(this).val($.trim($(this).val().replace(/<[^>]+>/g,'')))}) break; default: $(this).html($(this).html().replace(/<[^>]+>/g,'')); break; } }) } /** * 屏蔽功能键使用方法: * $(function(){ * $(form表单).xyprohibit(); 不带参数时默认屏蔽所有功能键 * $(form表单).xyprohibit({'prohibit':['mouseright','mouseleft','alt','ctrl','shift']}); * 参数选择,全部屏蔽等同于不带参数,参数必须以数组形式输入 * }) */ $.fn.xyprohibit = function(o){ o = $.extend({prohibit:['mouseright','mouseleft','alt','ctrl','shift']}, o || {}); return this.each(function(){ var obj = $(this); if(jquery.isarray(o.prohibit)){ for(var i=0; i'; html_en+='
  • '+$(this).attr('xy-msg')+'
  • '; } } if(mod==0){ return true; }else{ if(o.lang=='en'){ html = '

    please correct the following error input:

    '; }else{ html = '

    请调整以下错误信息:

    '; } boxy.alert(html, o.btnok); html = html_cn = html_en = different = identical = ''; mod = 0; request_name = new array(), request_bool = new array(); return false; } }) $(o.btnreset).click(function(){$('.errormessage').remove();}) checknotempty = function(obj){ var value = $.trim($(obj).val()), name = $(obj).attr('name').replace(/\[/g, "").replace(/\]/g, ""), placeholder = $(obj).attr('placeholder'), minlength = $(obj).attr('min'), maxlength = $(obj).attr('max'), maxsize= $(obj).attr('max')*1024*1024; if($(obj).parent().hasclass('top')){ addclass = 'top'; }else{ addclass = ''; } if($(obj).attr('xy-check')=="true"){ switch($(obj).attr('type')){ case 'checkbox': if(checkmustselected()) return checklength($('[name^='+name+']:checked').length); break; case 'radio': return checkmustselected(); break; default: if(value=='' || value==$(obj).attr('xy-empty')){ mod++; if($(obj).attr('xy-msg-position')){ $($(obj).attr('xy-msg-position')).append(''); }else{ if($(obj).parent().hasclass('append')){ $(obj).parent().append(''); }else{ $(obj).after(''); } } html_cn+='
  • '+placeholder+'不能为空
  • '; html_en+='
  • the '+placeholder+' is required and cannot be empty
  • '; return false; } if($(obj).attr('multiple') && $(obj).prop('tagname')=='select'){ return checklength($('[name^='+name+']>option:selected').length); } if($(obj).attr('type')=='file'){ var extensionarr = $(obj).attr('xy-check-type').split(','), typearr=''; for(var fi=0; fi'); }else{ if($(obj).parent().hasclass('append')){ $(obj).parent().append(''); }else{ $(obj).after(''); } } html_cn+='
  • 选定的文件是无效的,可上传的文件类型为('+$(obj).attr('xy-check-type')+')。
  • '; html_en+='
  • the selected file is not valid, can be uploaded to the file category ('+$(obj).attr('xy-check-type')+').
  • '; return false; } // check file type if (types && types.indexof(files[i].type) == -1) { mod++; if($(obj).attr('xy-msg-position')){ $($(obj).attr('xy-msg-position')).append(''); }else{ if($(obj).parent().hasclass('append')){ $(obj).parent().append(''); }else{ $(obj).after(''); } } html_cn+='
  • 选定的文件是无效的,可上传的文件类型为('+$(obj).attr('xy-check-type')+')。
  • '; html_en+='
  • the selected file is not valid, can be uploaded to the file category ('+$(obj).attr('xy-check-type')+').
  • '; return false; } // check file size if (maxsize && files[i].size > parseint(maxsize)) { mod++; if($(obj).attr('xy-msg-position')){ $($(obj).attr('xy-msg-position')).append(''); }else{ if($(obj).parent().hasclass('append')){ $(obj).parent().append(''); }else{ $(obj).after(''); } } html_cn+='
  • 选定的文件是无效的,文件大小不能超过'+$(obj).attr('max')+'mb。
  • '; html_en+='
  • the selected file is not valid, file size can not exceed '+$(obj).attr('max')+'mb.
  • '; return false; } } } else { // check file extension ext = value.substr(value.lastindexof('.') + 1); if (extensions && extensions.indexof(ext) == -1) { mod++; if($(obj).attr('xy-msg-position')){ $($(obj).attr('xy-msg-position')).append(''); }else{ if($(obj).parent().hasclass('append')){ $(obj).parent().append(''); }else{ $(obj).after(''); } } html_cn+='
  • 选定的文件是无效的,可上传的文件类型为('+$(obj).attr('xy-check-type')+'),由于当前浏览器不支持html5,文件大小无法验证,上传时请不要超过'+$(obj).attr('max')+'mb。
  • '; html_en+='
  • the selected file is not valid, can be uploaded to the file category ('+$(obj).attr('xy-check-type')+'), since the current browser does not support the html5, the file size can not be verified, please do not upload more than '+$(obj).attr('max')+'mb.
  • '; return false; } } } break; } } if(value!='' && $(obj).attr('xy-check-type') && $(obj).attr('type')!='file'){ switch($(obj).attr('xy-check-type')){ case 'email': var regexp = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-za-z\-0-9]+\.)+[a-za-z]{2,}))$/; if(!regexp.test(value)){ mod++; if($(obj).attr('xy-msg-position')){ $($(obj).attr('xy-msg-position')).append(''); }else{ if($(obj).parent().hasclass('append')){ $(obj).parent().append(''); }else{ $(obj).after(''); } } html_cn+='
  • '+placeholder+'格式错误
  • '; html_en+='
  • the input is not a valid email address
  • '; return false; } break; case 'func': if(!eval($(obj).attr('xy-func'))){ mod++; if($(obj).attr('xy-msg-position')){ $($(obj).attr('xy-msg-position')).append(''); }else{ if($(obj).parent().hasclass('append')){ $(obj).parent().append(''); }else{ $(obj).after(''); } } html_cn+='
  • '+$(obj).attr('xy-msg')+'
  • '; html_en+='
  • '+$(obj).attr('xy-msg')+'
  • '; return false; } break; case 'tel': var regexp = /^[\d\-]+$/; if(!regexp.test(value)){ mod++; if($(obj).attr('xy-msg-position')){ $($(obj).attr('xy-msg-position')).append(''); }else{ if($(obj).parent().hasclass('append')){ $(obj).parent().append(''); }else{ $(obj).after(''); } } html_cn+='
  • '+placeholder+'只能由数字和横线组成
  • '; html_en+='
  • the '+placeholder+' can contain only digits
  • '; return false; } break; case 'mobile': var regexp = /^\d+$/; if(!regexp.test(value)){ mod++; if($(obj).attr('xy-msg-position')){ $($(obj).attr('xy-msg-position')).append(''); }else{ if($(obj).parent().hasclass('append')){ $(obj).parent().append(''); }else{ $(obj).after(''); } } html_cn+='
  • '+placeholder+'只能包含数字
  • '; html_en+='
  • the '+placeholder+' can contain only digits
  • '; return false; } break; case 'username': var regexp = /^[a-za-z0-9_\.]+$/; if(!regexp.test(value)){ mod++; if($(obj).attr('xy-msg-position')){ $($(obj).attr('xy-msg-position')).append(''); }else{ if($(obj).parent().hasclass('append')){ $(obj).parent().append(''); }else{ $(obj).after(''); } } html_cn+='
  • '+placeholder+'只能由字母、数字、点和下划线组成
  • '; html_en+='
  • the '+placeholder+' can only consist of alphabetical, number, dot and underscore
  • '; return false; } break; } var length = value.length; checklength(length); } if($(obj).attr('different')){ if(!different){ different = value; differentplaceholder = placeholder; }else{ if(different==value){ mod++; if($(obj).attr('xy-msg-position')){ $($(obj).attr('xy-msg-position')).append(''); }else{ if($(obj).parent().hasclass('append')){ $(obj).parent().append(''); }else{ $(obj).after(''); } } html_cn+='
  • '+differentplaceholder+'不能和'+placeholder+'相同
  • '; html_en+='
  • the '+differentplaceholder+' and '+placeholder+' cannot be the same as each other
  • '; return false; } } } if($(obj).attr('identical')){ if(!identical){ identical = value; identicalplaceholder = placeholder; }else{ if(identical!=value){ mod++; if($(obj).attr('xy-msg-position')){ $($(obj).attr('xy-msg-position')).append(''); }else{ if($(obj).parent().hasclass('append')){ $(obj).parent().append(''); }else{ $(obj).after(''); } } html_cn+='
  • '+differentplaceholder+'和'+placeholder+'不相同
  • '; html_en+='
  • the '+differentplaceholder+' and its '+placeholder+' are not the same
  • '; return false; } } } if($(o.btnsubmit).attr('xy-check-request') && ($(obj).prop('tagname')=='textarea' || $(obj).attr('type')=='text')){ if($.inarray(name, request_name)<0){ request_name.push(name); request_bool.push(false); } if($(obj).val()){ request_bool[$.inarray(name, request_name)] = true; } } function checklength(length){ if ((minlength && length < minlength) || (maxlength && length > maxlength)){ mod++; if($(obj).attr('xy-msg-position')){ $($(obj).attr('xy-msg-position')).append(''); }else{ if($(obj).parent().hasclass('append')){ $(obj).parent().append(''); }else{ $(obj).after(''); } } if(minlength && !maxlength){ html_cn+='
  • '+placeholder+'位数必须大于'+minlength+'(包含)
  • '; html_en+='
  • the '+placeholder+' must be more than '+minlength+' number long
  • '; } if(!minlength && maxlength){ html_cn+='
  • '+placeholder+'位数必须小于'+maxlength+'(包含)
  • '; html_en+='
  • the '+placeholder+' must be less than '+maxlength+' number long
  • '; } if(minlength && maxlength){ html_cn+='
  • '+placeholder+'位数必须介于'+minlength+'和'+maxlength+'之间(包含)
  • '; html_en+='
  • the '+placeholder+' must be more than '+minlength+' and less than '+maxlength+' number long
  • '; } return false; } } function checkmustselected(){ if ($('[name^='+name+']:checked').length==0){ mod++; if($(obj).attr('xy-msg-position')){ $($(obj).attr('xy-msg-position')).append(''); }else{ if($(obj).parent().hasclass('append')){ $(obj).parent().append(''); }else{ $(obj).after(''); } } html_cn+='
  • '+placeholder+'为必选项
  • '; html_en+='
  • the '+placeholder+' must be selected.
  • '; return false; }else return true; } } }); } $.fn.xyscroll = function(o) { o = $.extend({ btnprev: null, btnnext: null, btngo: null, mousewheel: false, auto: null, speed: 100, easing: null, vertical: false, circular: true, visible: 3, start: 0, scroll: 1, beforestart: null, afterend: null, float: 'none', movescroll: 0 }, o || {}); return this.each(function() { // returns the element collection. chainable. var running = false, animcss=o.vertical?"top":"left", sizecss=o.vertical?"height":"width"; var div = $(this), ul = $("ul", div), lastul = $("ul:last", div), tli = $("li", ul), tl = tli.size(), v = (o.movescroll?o.movescroll:o.visible); var li = $("li", ul), itemlength = li.size(), curr = o.start; div.css("visibility", "visible"); li.css({overflow: "hidden", float: o.float=='none'?(o.vertical ? "none" : "left"):o.float}); ul.css({position: "absolute", "list-style-type": "none", "z-index": "1"}); div.css({overflow: "hidden", position: "relative", "z-index": "2"}); var lisize = o.vertical ? height(li) : width(li); // full li size(incl margin)-used for animation var ulsize = lisize * itemlength; // size of full ul(total length, not just for the visible items) var divsize = lisize * v; // size of entire div(total length for just the visible items) //li.css({width: li.width(), height: li.height()}); //当尺寸大小会随屏幕大小改变时此句需要注释 ul.css(sizecss, ulsize+"px").css(animcss, -(curr*lisize)); //div.css(sizecss, divsize+"px"); // width of the div. length of visible images var time; if(o.btnprev){ $(o.btnprev).click(function() { return go(-(o.movescroll?o.movescroll:o.scroll), false); }); var otime; $(o.btnprev).mouseover(function() { clearinterval(time) }).mouseout(function() { if(o.auto) { time = setinterval(function() { go(+(o.movescroll?o.movescroll:o.scroll), true); },o.auto+o.speed); } }); } if(o.btnnext) { $(o.btnnext).click(function() { return go(+(o.movescroll?o.movescroll:o.scroll), true); }); var otime; $(o.btnnext).mouseover(function() { clearinterval(time); }).mouseout(function() { if(o.auto) { time = setinterval(function() { go(+(o.movescroll?o.movescroll:o.scroll),true) },o.auto+o.speed); } }); } if(o.btngo) $.each(o.btngo, function(i, val) { $(val).click(function() { return go((o.circular ? o.visible+i : i), true); }); }); if(o.mousewheel && div.mousewheel) div.mousewheel(function(e, d) { return d>0 ? go(-(o.movescroll?o.movescroll:o.scroll), false) : go(+(o.movescroll?o.movescroll:o.scroll), true); }); if(o.auto) { //为了控制滚动速度修改 time = setinterval(function() { go(+(o.movescroll?o.movescroll:o.scroll), true); }, o.auto+o.speed); ul.mouseover(function() { clearinterval(time); }).mouseout(function(){ time = setinterval(function() { go(+(o.movescroll?o.movescroll:o.scroll), true); }, o.auto+o.speed); }); } function vis() { return li.slice(curr).slice(0,v); }; function go(to, way) { var way = way; if(!running) { if(o.beforestart) o.beforestart.call(this, vis()); if(o.circular) { // if circular we are in first or last, then goto the other end if(way){ ul.append($('li', ul).slice(0,o.scroll).clone()); curr = to; }else{ ul.prepend($('li', ul).slice(tl-o.scroll).clone()).css(animcss, -(v*lisize)); curr = 0; } } else { // if non-circular and to points to first or last, we just return. if(to<0 || to>itemlength-v) return; else curr = to; } // if neither overrides it, the curr will still be "to" and we can proceed. running = true; ///程序段滚动到位时间的设置为o.speed*0.4 ul.animate( animcss == "left" ? { left: -(curr*lisize) } : { top: -(curr*lisize) } , o.speed*0.4, o.easing, function() { if(o.afterend) o.afterend.call(this, vis()); running = false; if(way){ for(var j=0; j itemlength-v && o.btnnext) || [] ).addclass("disabled"); } } return false; }; }); }; function css(el, prop) { return parseint($.css(el[0], prop)) || 0; }; function width(el) { return ($(el).width()?$(el).width():el[0].offsetwidth) + css(el, 'marginleft') + css(el, 'marginright'); }; function height(el) { return ($(el).height()?$(el).height():el[0].offsetheight) + css(el, 'margintop') + css(el, 'marginbottom'); }; })(jquery); /** * html5动画效果,标注有动画效果的模块(.xysation)是否显示在当前页面的显示区域,当显示时添加.xysationshow */ function xysationwindow(){ //整屏 if($(window).width()>736){$('section').css({'min-height':$(window).height(), 'width':$(window).width()});} //设置一屏高度 $xysationfun = function() { var st = $(document).scrolltop(); var i = 1; $('.xysation').each(function(){ if((st+$(window).height())>$(this).offset().top && (st-$(this).height())<$(this).offset().top && !$(this).is('.xysationshow')){ var obj = this; settimeout(function(){ $(obj).addclass('xysationshow') }, i * 100); i++; } }) } $(window).bind("scroll", $xysationfun) $(window).resize(function(){if($(window).width()>736){$('section').css({'min-height':$(window).height(), 'width':$(window).width()});}}) //设置一屏高度 $(function(){$xysationfun()}) } function xysation(){ //不整屏 $xysationfun = function() { var st = $(document).scrolltop(); var i = 1; $('.xysation').each(function(){ if((st+$(window).height())>$(this).offset().top && (st-$(this).height())<$(this).offset().top && !$(this).is('.xysationshow')){ var obj = this; settimeout(function(){ $(obj).addclass('xysationshow') }, i * 0); i++; } }) } $(window).bind("scroll", $xysationfun) $(function(){$xysationfun()}) } $(function(){ xysation(); $('.trim').xystriphtml(); })