原創圖片分組帶略縮圖播放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 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!