原創圖片分組帶略縮圖播放Jquery插件
此Jquery插件是一款綜合了幾種功能的實用特效。
可支持以下功能:
1、圖片的左右輪播
2、圖片的略給圖
3、帶上一張和下一張的按鈕功能
4、圖片分組
5、綁定詳細內容顯示
6、可設置圖片播放的速度
7、可設置默認顯示的圖片
8、可設置當前樣式顯示
效果如下:

在線演示和下載
插件代碼如下:
;(function($){ $.fn.adam_Eff = function(options) { var defaults = { speed: 400, def: 0, curr: "curr" }; var options = $.extend(defaults,options); return this.each(function() { var $this = $(this), $tabslist = $("#adam-tabs",$this), $bigImg = $("ul",$this), $tabs = $tabslist.find("dd"), sTabsLen = $tabs.length, $count = $tabslist.find("dt"), $count_index = $count.find("span"), $count_sum = $count.find("samp"), $tabsCon = $("#adam-tabsContent",$this).children(), $tabsNews = $("div.adam-news"), $fstDD = $tabsCon.find("dd:first"), $perv = $("b.adam-scroll-prev",$this), $next = $("b.adam-scroll-next",$this), _LenArr = [], _maxLen = 5, _IDX = 0, _sImgIdx = 0, nBigWidth = $tabsCon.find("li:eq(0)").outerWidth(true), nSmallWidth = $tabsCon.find("dd:eq(0)").outerWidth(true); // 數據初始化 $tabs.eq(options.def) .addClass(options.curr); $tabsCon.find("dd:first") .addClass(options.curr) .end() .eq(options.def) .show() .end() .find("b") .fadeTo(0,.5); (function(l,arr){ for(var i = 0; i<l; i+=1){ var $thisDD = $tabsCon.eq(i).find("dd"); _LenArr.push($thisDD.length); if(i==0) { $count_index.text(i+1); $count_sum.text(_LenArr[0]); }; $tabsNews.eq(i) .find("div") .text(arr.eq(i).find("a").attr("title")) .show(); $tabsNews.eq(i) .find("p") .text(arr.eq(i).find("a").attr("content")) .show();}; }(sTabsLen,$fstDD)); // 綁定事件 $tabs.bind("click",function(){ _IDX = $(this).index(); var $thisCon = $tabsCon.eq(_IDX), sImgIdx = $thisCon.find("dd."+options.curr).index()+1; $tabs.eq(_IDX) .addClass(options.curr) .siblings() .removeClass(options.curr); if ($.browser.msie && !$.support.style){ $thisCon.show() .siblings() .hide(); } else { $thisCon.fadeIn(options.speed) .siblings() .fadeOut(200); }; $count_index.text(sImgIdx); $count_sum.text(_LenArr[_IDX]); }); function selectImg($t,$p,i,s,c){ var $B = $p.find("ul"), $D = $p.find("dl"), $A = $t.find("a"), $N = $p.children().eq(1), _l = -nBigWidth*i; $count_index.text(i+1); $N.find("div") .fadeOut(100,function(){ $(this).text($A.attr("title")) .fadeIn(200) }) .end() .find("p") .fadeOut(100,function(){ $(this).text($A.attr("content")) .fadeIn(200); }); $t.addClass(c) .siblings() .removeClass(c); $B.stop().animate({ "left": _l },s); if((i-2) >=0 ){ $D.stop().animate({ "left": -(i-2)*nSmallWidth-10 },s); }; }; $tabsCon.find("dd").bind("click",function(){ _sImgIdx = $(this).index(); var $me = $(this), $parent = $me.parent().parent().parent(); selectImg( $me, $parent, _sImgIdx, options.speed, options.curr ); }); $perv.bind("click",function(){ var $me = $(this), $parent = $me.parent().parent().parent(), $dd = $parent.find("dd."+options.curr); _sImgIdx = $dd.index(); if(_sImgIdx > 0 ){ _sImgIdx -= 1; selectImg( $dd.prev(), $parent,_sImgIdx, options.speed, options.curr ); }; }); $next.bind("click",function(){ var $me = $(this), $parent = $me.parent().parent().parent(), $dd = $parent.find("dd."+options.curr); _sImgIdx = $dd.index(); if(_sImgIdx < parseInt($count_sum.text())-1){ _sImgIdx += 1; selectImg( $dd.next(), $parent, _sImgIdx, options.speed, options.curr ); }; }); return false; }); };
})(jQuery)</pre>
本文由用戶 dengjianbin 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!