原创图片分组带略缩图播放Jquery插件

dengjianbin 12年前

此Jquery插件是一款综合了几种功能的实用特效。

可支持以下功能:

1、图片的左右轮播

2、图片的略给图

3、带上一张和下一张的按钮功能

4、图片分组

5、绑定详细内容显示

6、可设置图片播放的速度

7、可设置默认显示的图片

8、可设置当前样式显示


效果如下:

网友Adam‘分享原创图片分组带略缩图播放Jquery插件

在线演示和下载

插件代码如下:
;(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)