相册在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,然后显示大图，点击大图的左右会实现上一张 下一张的功能。小的缩略图和大图之间会实现滚动的同步。
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。