本文主要是介绍jquery实现的画廊，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
自己的画廊效果图 可以自动播放，有上一张、下一站、暂停、图片缩略图、图片的文字说明
看的效果还不错，这个是借鉴网上的一个案例，然后自己改编的（我会把案例都上传）
网上找的 画廊资源：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这篇关于jquery实现的画廊的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
