自己的画廊效果图 可以自动播放,有上一张、下一站、暂停、图片缩略图、图片的文字说明
看的效果还不错,这个是借鉴网上的一个案例,然后自己改编的(我会把案例都上传)
网上找的 画廊资源:http://download.csdn.net/detail/stamsuper1/5507749
下面是我做的项目的模块(根据网上的这段代码修改的)
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" href="../../../Css/Galleria/gallery.css" type="text/css" media="screen"/>
<!-- load jQuery -->
<script src="../../../Js/jquery-1.9.1.min.js" type="text/javascript"></script>
<!-- load Galleria -->
<script src="../../../Js/Galleria/jquery.galleria.min.js" type="text/javascript"></script>
</head>
<body style="margin:0px;">
<div class="content">
<div id="msg_slideshow" class="msg_slideshow">
<div id="msg_wrapper" class="msg_wrapper"></div>
<div id="msg_controls" class="msg_controls"><!-- right has to animate to 15px, default -110px -->
<a href="#" id="msg_grid" class="msg_grid"></a>
<a href="#" id="msg_prev" class="msg_prev"></a>
<a href="#" id="msg_pause_play" class="msg_pause"></a><!-- has to change to msg_play if paused-->
<a href="#" id="msg_next" class="msg_next"></a>
</div>
<div id="msg_thumbs" class="msg_thumbs"><!-- top has to animate to 0px, default -230px -->
<a href="#" id="msg_thumb_next" class="msg_thumb_next"></a>
<a href="#" id="msg_thumb_prev" class="msg_thumb_prev"></a>
<a href="#" id="msg_thumb_close" class="msg_thumb_close"></a>
<span class="msg_loading"></span><!-- show when next thumb wrapper loading -->
</div>
</div>
<script type="text/javascript">
var galleryObj = null;
$(function () {
//图片随便给的, 可以自己修改正确的路径就行了
var initimgArr = ["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "11.jpg", "22.jpg", "33.jpg", "44.jpg", "55.jpg"];
//图片的描述信息
var initimgAlt = ["描述_1.jpg","描述_2.jpg","描述_3.jpg","描述_4.jpg","描述_5.jpg","描述_11.jpg","描述_22.jpg","描述_33.jpg","描述_44.jpg","描述_55.jpg"];
///这个是图片类型的切换,
var imgTypeControls = [{ "id": "sdt", "text": "速度图", "name": "sdt" }, { "id": "qdt", "text": "强度图", "name": "qdt"}];
var getimgList = function (obj) {
var imgArr, imgAlt;
//如果是 图片速度图
if (obj.id == "imgType_sdt") {
imgArr =["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "11.jpg", "22.jpg", "33.jpg", "44.jpg", "55.jpg"];
imgAlt =["描述_1.jpg","描述_2.jpg","描述_3.jpg","描述_4.jpg","描述_5.jpg","描述_11.jpg","描述_22.jpg","描述_33.jpg","描述_44.jpg","描述_55.jpg"];
} else if (obj.id == "imgType_qdt") {//如果是 图片强度图
imgArr =["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "11.jpg", "22.jpg", "33.jpg", "44.jpg", "55.jpg"];
imgAlt =["描述_1.jpg","描述_2.jpg","描述_3.jpg","描述_4.jpg","描述_5.jpg","描述_11.jpg","描述_22.jpg","描述_33.jpg","描述_44.jpg","描述_55.jpg"];
}
//切换图片类型
galleryObj.setImgList(imgArr, imgAlt);
}
///imgSrcPrefix :图片路径的前缀,可以没有,但上面图片路径数组中的路径得要写对(这个就是为了简化书写)
//interval:图片播放的频率
//initimgAlt:图片的描述
//
var option = { imglist: initimgArr, imgSrcPrefix: "../../../Image/Galleria/", interval: 1, imgDesc: initimgAlt, imgTypeControl: imgTypeControls, getImgTypeFun: getimgList };
galleryObj = $("#msg_thumbs").gallery(option);
//注册绑定窗口自适应方法
$(window).bind("resize", function () {
galleryObj.setContentSize($(window).width(), $(window).height());
});
});
</script>
</body>
样式文件内容
.msg_slideshow{
padding:10px;
position:rela