推荐订阅源

相册在web开发中算是比较常用的功能。网上也有很多jQuery的相册的插件。功能也是非常的强大。

这篇博客上是实现的相册的功能是用到了2个jQuery的插件：

1. jquery.jcarousel.min  这个插件是用来滚动缩略图的。具体的详细信息可以参考。

http://sorgalla.com/jcarousel/ 

2. jquery的ui插件，需要利用其中的dialog的功能。 

具体的代码如下：

HTML代码

 1         <ul id="mycarousel" class="jcarousel-skin-tango">
 2                 <li><img src="meinv1.jpg" width="60" height="60" alt="" /></li>
 3                 <li><img src="meinv2.jpg" width="60" height="60" alt="" /></li>
 4                 <li><img src="meinv3.jpg" width="60" height="60" alt="" /></li>
 5                 <li><img src="meinv4.jpg" width="60" height="60" alt="" /></li>
 6                 <li><img src="meinv5.jpg" width="60" height="60" alt="" /></li>
 7         </ul>
 8         <div id="showDiv">        
 9             <div id="efpLeftArea" class="arrLeft" title="上一张" onclick="prevImg()"></div>
10             <div id="efpRightArea" class="arrRight" title="下一张" onclick="nextImg()"></div>        
11             <div>
12                 <img id="showImg" />
13             </div>

14         </div>

JS代码

 1 $(function(){
 2                 $('#mycarousel').jcarousel({
 3                     scroll:1
 4                 });
 5             
 6                 $("#showDiv").dialog({
 7                     title:"图片显示" ,
 8                     position:"center",
 9                     modal:true,
10                     autoOpen:false,
11                     width:800,
12                     height:600,
13                     resizable:false
14                 });
15             
16                 $("#mycarousel img").click(function(){
17                     $(this).addClass("imgmouseover");
18                     $(this).parent().prevAll("li").children("img").removeClass("imgmouseover");
19                     $(this).parent().nextAll("li").children("img").removeClass("imgmouseover");
20                     $("#showDiv").dialog("open");
21                     $("#showImg").attr("src",$(this).attr("src"));
22                     $("#showDiv").scrollTop(0);
23                     $("#efpLeftArea").height($("#showImg").height());
24                     $("#efpRightArea").height($("#showImg").height());
25                 });
26             
27                 
28             });
29             
30             function nextImg()
31             {
32                 var ele=$("img.imgmouseover");
33                 if(ele.attr("src")!=$("#mycarousel img").last().attr("src"))
34                 {
35                     ele.parent().next().children("img").addClass("imgmouseover");
36                     ele.removeClass("imgmouseover");
37                     $("#showImg").attr("src",ele.parent().next().children("img").attr("src"));
38                     $("#showDiv").scrollTop(0);
39                     $("#efpLeftArea").height($("#showImg").height());
40                     $("#efpRightArea").height($("#showImg").height());
41                     $(".jcarousel-next.jcarousel-next-horizontal").click();
42                 }
43             }
44             function prevImg()
45             {
46                 var ele=$("img.imgmouseover");
47                 if(ele.attr("src")!=$("#mycarousel img").first().attr("src"))
48                 {
49                     ele.parent().prev().children("img").addClass("imgmouseover");
50                     ele.removeClass("imgmouseover");
51                     $("#showImg").attr("src",ele.parent().prev().children("img").attr("src"));
52                     $("#showDiv").scrollTop(0);
53                     $("#efpLeftArea").height($("#showImg").height());
54                     $("#efpRightArea").height($("#showImg").height());
55                     $(".jcarousel-prev.jcarousel-prev-horizontal").click();
56                 }

57             }

外部JS和CSS文件的引用

<style>
            .imgmouseover{
                border:1px solid red
            }
            .arrLeft {
                cursor: url(http://www.sinaimg.cn/edu/images/slidenews/arr_left.cur),auto;
            }
            .arrRight {
                cursor: url(http://www.sinaimg.cn/edu/images/slidenews/arr_right.cur),auto;
            }
            #efpLeftArea {
                width: 50%;
                height: 100%;
                position: absolute;
                left: 0;
                top: 0;
                z-index: 9999;
                background: white;
                opacity: 0;
                filter: Alpha(Opacity=0);
            }
            #efpRightArea {
                width: 50%;
                height: 100%;
                position: absolute;
                right: 0;
                top: 0;
                z-index: 9999;
                background: white;
                opacity: 0;
                filter: Alpha(Opacity=0);
            }
        </style>
        <link type="text/css" href="css/smoothness/jquery-ui-1.8.16.custom.css" rel="stylesheet" />    
        <link type="text/css" href="skins/tango/skin.css" rel="stylesheet" />    
        <script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
        <script type="text/javascript" src="jquery.jcarousel.min.js"></script>

运行起来html页面,可以看到一排小的缩略图片，点击小图时dialog会open,然后显示大图，点击大图的左右会实现上一张 下一张的功能。小的缩略图和大图之间会实现滚动的同步。