jquery.sgallery.js 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206
  1. /*
  2. * sGallery 1.0 - simple gallery with jQuery
  3. * made by bujichong 2009-11-25
  4. * 作者:不羁虫 2009-11-25
  5. * http://hi.baidu.com/bujichong/
  6. * 欢迎交流转载,但请尊重作者劳动成果,标明插件来源及作者
  7. */
  8. (function ($) {
  9. $.fn.sGallery = function (o) {
  10. return new $sG(this, o);
  11. //alert('do');
  12. };
  13. var settings = {
  14. thumbObj:null,//预览对象
  15. titleObj:null,//标题
  16. botLast:null,//按钮上一个
  17. botNext:null,//按钮下一个
  18. thumbNowClass:'now',//预览对象当前的class,默认为now
  19. slideTime:800,//平滑过渡时间
  20. autoChange:true,//是否自动切换
  21. changeTime:5000,//自动切换时间
  22. delayTime:100//鼠标经过时反应的延迟时间
  23. };
  24. $.sGalleryLong = function(e, o) {
  25. this.options = $.extend({}, settings, o || {});
  26. var _self = $(e);
  27. var set = this.options;
  28. var thumb;
  29. var size = _self.size();
  30. var nowIndex = 0; //定义全局指针
  31. var index;//定义全局指针
  32. var startRun;//预定义自动运行参数
  33. var delayRun;//预定义延迟运行参数
  34. //初始化
  35. _self.eq(0).show();
  36. //主切换函数
  37. function fadeAB () {
  38. if (nowIndex != index) {
  39. if (set.thumbObj!=null) {
  40. $(set.thumbObj).removeClass().eq(index).addClass(set.thumbNowClass);}
  41. _self.eq(nowIndex).stop(false,true).fadeOut(set.slideTime);
  42. _self.eq(index).stop(true,true).fadeIn(set.slideTime);
  43. $(set.titleObj).eq(nowIndex).hide();//新增加title
  44. $(set.titleObj).eq(index).show();//新增加title
  45. nowIndex = index;
  46. if (set.autoChange==true) {
  47. clearInterval(startRun);//重置自动切换函数
  48. startRun = setInterval(runNext,set.changeTime);}
  49. }
  50. }
  51. //切换到下一个
  52. function runNext() {
  53. index = (nowIndex+1)%size;
  54. fadeAB();
  55. }
  56. //点击任一图片
  57. if (set.thumbObj!=null) {
  58. thumb = $(set.thumbObj);
  59. //初始化
  60. thumb.eq(0).addClass(set.thumbNowClass);
  61. thumb.bind("mousemove",function(event){
  62. index = thumb.index($(this));
  63. fadeAB();
  64. delayRun = setTimeout(fadeAB,set.delayTime);
  65. clearTimeout(delayRun);
  66. event.stopPropagation();
  67. })
  68. }
  69. //点击上一个
  70. if (set.botNext!=null) {
  71. var botNext = $(set.botNext);
  72. botNext.mousemove(function () {
  73. runNext();
  74. return false;
  75. });
  76. }
  77. //点击下一个
  78. if (set.botLast!=null) {
  79. var botLast = $(set.botLast);
  80. botLast.mousemove(function () {
  81. index = (nowIndex+size-1)%size;
  82. fadeAB();
  83. return false;
  84. });
  85. }
  86. //自动运行
  87. if (set.autoChange==true) {
  88. startRun = setInterval(runNext,set.changeTime);
  89. }
  90. }
  91. var $sG = $.sGalleryLong;
  92. })(jQuery);
  93. function slide(Name,Class,Width,Height,fun){
  94. $(Name).width(Width);
  95. $(Name).height(Height);
  96. if(fun == true){
  97. $(Name).append('<div class="title-bg"></div><div class="title"></div><div class="change"></div>')
  98. var atr = $(Name+' div.changeDiv a');
  99. var sum = atr.length;
  100. for(i=1;i<=sum;i++){
  101. var title = atr.eq(i-1).attr("title");
  102. var href = atr.eq(i-1).attr("href");
  103. $(Name+' .change').append('<i>'+i+'</i>');
  104. $(Name+' .title').append('<a href="'+href+'">'+title+'</a>');
  105. }
  106. $(Name+' .change i').eq(0).addClass('cur');
  107. }
  108. $(Name+' div.changeDiv a').sGallery({//对象指向层,层内包含图片及标题
  109. titleObj:Name+' div.title a',
  110. thumbObj:Name+' .change i',
  111. thumbNowClass:Class
  112. });
  113. $(Name+" .title-bg").width(Width);
  114. }
  115. //缩略图
  116. jQuery.fn.LoadImage=function(scaling,width,height,loadpic){
  117. if(loadpic==null)loadpic="../images/msg_img/loading.gif";
  118. return this.each(function(){
  119. var t=$(this);
  120. var src=$(this).attr("src")
  121. var img=new Image();
  122. img.src=src;
  123. //自动缩放图片
  124. var autoScaling=function(){
  125. if(scaling){
  126. if(img.width>0 && img.height>0){
  127. if(img.width/img.height>=width/height){
  128. if(img.width>width){
  129. t.width(width);
  130. t.height((img.height*width)/img.width);
  131. }else{
  132. t.width(img.width);
  133. t.height(img.height);
  134. }
  135. }
  136. else{
  137. if(img.height>height){
  138. t.height(height);
  139. t.width((img.width*height)/img.height);
  140. }else{
  141. t.width(img.width);
  142. t.height(img.height);
  143. }
  144. }
  145. }
  146. }
  147. }
  148. //处理ff下会自动读取缓存图片
  149. if(img.complete){
  150. autoScaling();
  151. return;
  152. }
  153. $(this).attr("src","");
  154. var loading=$("<img alt=\"加载中...\" title=\"图片加载中...\" src=\""+loadpic+"\" />");
  155. t.hide();
  156. t.after(loading);
  157. $(img).load(function(){
  158. autoScaling();
  159. loading.remove();
  160. t.attr("src",this.src);
  161. t.show();
  162. //$('.photo_prev a,.photo_next a').height($('#big-pic img').height());
  163. });
  164. });
  165. }
  166. //向上滚动代码
  167. function startmarquee(elementID,h,n,speed,delay){
  168. var t = null;
  169. var box = '#' + elementID;
  170. $(box).hover(function(){
  171. clearInterval(t);
  172. }, function(){
  173. t = setInterval(start,delay);
  174. }).trigger('mouseout');
  175. function start(){
  176. $(box).children('ul:first').animate({marginTop: '-='+h},speed,function(){
  177. $(this).css({marginTop:'0'}).find('li').slice(0,n).appendTo(this);
  178. })
  179. }
  180. }
  181. //TAB切换
  182. function SwapTab(name,title,content,Sub,cur){
  183. $(name+' '+title).mouseover(function(){
  184. $(this).addClass(cur).siblings().removeClass(cur);
  185. $(content+" > "+Sub).eq($(name+' '+title).index(this)).show().siblings().hide();
  186. });
  187. }