jQuery滚动显示图片列表

---------------------imgviewer.cs--------------------

.ScrollLeft{width:10px;float:left;}
.ScrollRight{width:10px;float:left;}
.ScrollBody{float:left;overflow:hidden;word-break:keep-all;white-space:nowrap;}
.ScrollBody img{width:60px;height:60px;margin:0px 4px;}
.disable{ 
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);    
    filter: grayscale(100%);
    filter: gray;
}
.enable{cursor:pointer;}

----------------------imgviewer.js----------------------

(function ($) {
    $.fn.imgviewer = function (options) {
        var target = this;
        var settings = {
            "imgScrollLeft": "#imgScrollLeft",
            "imgScrollRight": "#imgScrollRight",
            "clientWidth": 480,
            "speed": 130
        };
        $.extend(settings, options);
        this.width(settings.clientWidth);
        var totalWidth = this[0].scrollWidth;
        if (totalWidth > settings.clientWidth) {
            $(settings.imgScrollRight).attr("class", "enable");
        }


        $(settings.imgScrollLeft).bind("click", function () {
            if ($(this).attr("class") == "enable") {
                target.animate({ scrollLeft: target.scrollLeft() - settings.speed }, 300,function () {
                    scrollBarDisplay();
                });
            }
        });
        $(settings.imgScrollRight).bind("click", function () {
            if ($(this).attr("class") == "enable") {
                target.animate({ scrollLeft: target.scrollLeft() + settings.speed },300, function () {
                    scrollBarDisplay();
                });
            }
        });


        //设置滚动按钮是否可用
        function scrollBarDisplay() {
            var sLeft = target.scrollLeft();
            if (sLeft == 0) {
                $(settings.imgScrollLeft).attr("class", "disable");
            }
            else {
                $(settings.imgScrollLeft).attr("class", "enable");
            }


            if (sLeft + settings.clientWidth >= totalWidth) {
                $(settings.imgScrollRight).attr("class", "disable");
            }
            else {
                $(settings.imgScrollRight).attr("class", "enable");
            }
        }


        return this;
    }
})(jQuery);




(function ($) {
    $.fn.showbox = function (options) {
        var settings = {
            "title": "",
            "content":"",
            "background":"#404040",
            "width": 500,
            "height": 400,
            "closeColor":"#FFF"
        };
        $.extend(settings, options);
        var randID=(Math.random()+"").replace(".","");
        var divBgID="divBg"+randID;
        var spCloseID="spClose"+randID;
        var divBodyID="divBody"+randID;


        var wHeight=$(window).height();
        var wWidth=$(window).width();
        //半透明背景
        var dHeight = $(document).height();
        if(wHeight>dHeight) dHeight=wHeight;
        var boxBg="<div id='"+divBgID+"' style='width:100%;height:"+dHeight+"px;top:0px;left:0px;position:absolute;z-index:1000;background:#000;opacity:0.2;filter:alpha(opacity=20)'></div>";
        $("body").append(boxBg);
        //显示内容框
        var boxHtml="",boxTitleHtml="",boxBodyHtml="";
        if(settings.title.length>0){
            settings.height+=35;//显示标题时，高度增加35px
            var close="<span id='"+spCloseID+"' style='font-weight:bold;font-size:20px;float:right;cursor:pointer;padding:2px 8px;'>×</span>";
            boxTitleHtml="<div style='background:"+settings.background+";color:"+settings.closeColor+";font-size:14px;font-weight:bold;height:35px;line-height:35px;padding-left:10px;'>"+close+settings.title+"</div>";
        }
        else{
            boxTitleHtml="<span id='"+spCloseID+"' style='background:"+settings.background+";color:"+settings.closeColor+";font-weight:bold;font-size:20px;position:absolute;top:0px;right:0px;padding:2px 8px;cursor:pointer;'>×</span>";//显示关闭按钮
        }
        if(settings.content.length==0){
            settings.content=this.html();
        }
        boxBodyHtml="<div>"+settings.content+"</div>";
        var scrollTop=$(document).scrollTop();
        var top=(wHeight-settings.height)/2+scrollTop;
        var left=(wWidth-settings.width)/2;
        boxHtml="<div id='"+divBodyID+"' style='width:"+settings.width+"px;height:"+settings.height+"px;position:absolute;z-index:1001;top:"+top+"px;left:"+left+"px;background:#FFF;'>"+boxTitleHtml+boxBodyHtml+"</div>";
        $("body").append(boxHtml);
        $("#"+spCloseID).bind("click",function(){
            $("#"+divBodyID).remove();
            $("#"+divBgID).remove();
        });
        return this;
    }
})(jQuery);


//鼠标滚轮滚动，改变图片大小  onmousewheel='return bbimg(this)' 
    function bbimg(o){ 
        var zoom=parseInt(o.style.zoom, 10)||100;zoom+=event.wheelDelta/12;if (zoom>0) o.style.zoom=zoom+'%'; 
        return false; 
    } 

---------------------------------------html---------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="imgviewer/imgviewer.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="imgviewer/imgviewer.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#divScrollBody").imgviewer();
            
            //动态改变图片列表内容
            $("#sp").bind("click", function () {
                var list = $(this).html().split('|');
                var imgList = "";
                for (var i = 0; i < list.length; i++) {
                    imgList += "<img src=\"" + list[i] + "\" />";
                }
                $("#divScrollBody").html(imgList);
                $("#divScrollBody").imgviewer();
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        
        <table style="width:500px" border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td>
                    <div class="ScrollLeft"><img id="imgScrollLeft" class="disable" src="imgviewer/ScrollLeft.png" /></div>
                    <div id="divScrollBody" class="ScrollBody"><img src="iGzeeOA/upfiles/20151217143012583.jpg" /><img src="iGzeeOA/upfiles/20151217143012583.jpg" /><img src="iGzeeOA/upfiles/20151217143012583.jpg" /><img src="iGzeeOA/upfiles/20151217143012583.jpg" /><img src="iGzeeOA/upfiles/20151217143012583.jpg" /><img src="iGzeeOA/upfiles/20151217143012583.jpg" /></div>
                    <div class="ScrollRight"><img id="imgScrollRight" class="disable" src="imgviewer/ScrollRight.png" /></div>
                </td>
            </tr>
        </table>


        <span id="sp">/iGzeeOA/upfiles/20151217160454805.png|/iGzeeOA/upfiles/20151217160454482.png|/iGzeeOA/upfiles/20151217160454482_2.png|/iGzeeOA/upfiles/20151217160454805.png|/iGzeeOA/upfiles/20151217160454482.png|/iGzeeOA/upfiles/20151217160454482.png|/iGzeeOA/upfiles/20151217160454805.png|/iGzeeOA/upfiles/20151217160454482.png|/iGzeeOA/upfiles/20151217160454482_2.png|/iGzeeOA/upfiles/20151217160454805.png|/iGzeeOA/upfiles/20151217160454482.png|/iGzeeOA/upfiles/20151217160454482.png</span>
    </div>
    </form>
</body>
</html>