jquery实现的画廊

最新推荐文章于 2024-08-15 09:56:34 发布

男儿当自强-

最新推荐文章于 2024-08-15 09:56:34 发布

阅读量1.2k

点赞数

分类专栏： javascript jquery 文章标签：画廊相册

本文链接：https://blog.csdn.net/stamsuper/article/details/8991016

版权

自己的画廊效果图可以自动播放，有上一张、下一站、暂停、图片缩略图、图片的文字说明

看的效果还不错，这个是借鉴网上的一个案例，然后自己改编的（我会把案例都上传）

网上找的画廊资源：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

最低0.47元/天解锁文章

男儿当自强-

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录