原創圖片分組帶略縮圖播放Jquery插件

dengjianbin 11年前發布 | 16K 次閱讀 圖片展示jQuery插件 jQuery插件

此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)</pre>

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