自己的画廊效果图 可以自动播放，有上一张、下一站、暂停、图片缩略图、图片的文字说明
看的效果还不错，这个是借鉴网上的一个案例，然后自己改编的（我会把案例都上传）
网上找的 画廊资源：http://download.youkuaiyun.com/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:relative;
overflow:hidden;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}
.msg_slideshow a{
outline:none;
}
.msg_slideshow a img{
border:none;
}
.msg_wrapper{
position:relative;
margin:0;
padding:0;
display:table-cell;
text-align:center;
vertical-align:middle;
}
.msg_wrapper .imgDesc{
position:absolute;
z-index: 20;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
opacity:0.8;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
background-color:#FFFFE0;
border:1px dashed gray;
visibility:hidden;
color:#000;
text-decoration:none;
padding:10px;
}
.msg_wrapper:hover .imgDesc{visibility:visible;}
.msg_wrapper img{
display: inline-block!important;
vertical-align:middle;
-moz-box-shadow:0px 0px 10px #000;
-webkit-box-shadow:0px 0px 10px #000;
box-shadow:0px 0px 10px #000;
}
.imgTypeControl{
left:-2000px;
border:1px dashed gray;
color:White;
}
.msg_controls{
right:-110px;
width:104px;
}
.imgTypeControl , .msg_controls
{
background-color:#000;
position:absolute;
bottom:15px;
height:26px;
z-index: 20;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
opacity:0.8;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
}
.msg_controls a{
float:left;
background-color:#000;
width:20px;
height:20px;
margin:3px 3px;
opacity:0.5;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
background-repeat:no-repeat;
background-position: center center;
}
.msg_controls a:hover{
opacity:1.0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=99);
}
.msg_controls a.msg_grid{
background-image:url(../../Image/Galleria/icons/grid.png);
}
.msg_controls a.msg_prev{
background-image:url(../../Image/Galleria/icons/prev.png);
}
.msg_controls a.msg_next{
background-image:url(../../Image/Galleria/icons/next.png);
}
.msg_controls a.msg_pause{
background-image:url(../../Image/Galleria/icons/pause.png);
}
.msg_controls a.msg_play{
background-image:url(../../Image/Galleria/icons/play.png);
}
.msg_thumbs{
background:#B3A7A7;
position:absolute;
top:-230px;
left:50%;
padding:30px;
-moz-border-radius:0px 0px 10px 10px;
-webkit-border-bottom-left-radius:10px;
-webkit-border-bottom-right-radius:10px;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
-moz-box-shadow:1px 1px 5px #000;
-webkit-box-shadow:1px 1px 5px #000;
box-shadow:1px 1px 5px #000;
opacity:0.9;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);
overflow:hidden;
}
.msg_thumb_wrapper{
position:absolute;
top:30px;
left:30px;
z-index:30;
}
.msg_thumb_wrapper a{
display:block;
width:75px;
height:75px;
float:left;
margin:4px;
opacity:0.5;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
}
.msg_thumbs a.msg_thumb_next,
.msg_thumbs a.msg_thumb_prev{
width:18px;
height:20px;
background-repeat:no-repeat;
background-position: center center;
position:absolute;
top:50%;
margin-top:-10px;
opacity:0.5;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
}
.msg_thumbs a.msg_thumb_next:hover,
.msg_thumbs a.msg_thumb_prev:hover{
opacity:1.0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=99);
}
.msg_thumbs a.msg_thumb_next{
background:#000 url(../../Image/Galleria/icons/next_thumb.png) no-repeat center center;
right:5px;
}
.msg_thumbs a.msg_thumb_prev{
background:#000 url(../../Image/Galleria/icons/prev_thumb.png) no-repeat center center;
left:5px;
}
.msg_thumbs a.msg_thumb_close{
position:absolute;
bottom:0px;
width:50px;
left:50%;
margin:0 0 0 -25px;
background:#202020 url(../../Image/Galleria/icons/up.png) no-repeat center center;
height:16px;
opacity:0.7;
-moz-border-radius:5px 5px 0 0;
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
border-top-left-radius:5px;
border-top-right-radius:5px;
}
.msg_thumbs a.msg_thumb_close:hover{
opacity:1.0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=99);
}
.msg_loading{
position:absolute;
background:transparent url(../../Image/Galleria/icons/loading.gif) no-repeat center center;
top:50%;
left:50%;
width:50px;
height:50px;
margin:-25px 0 0 -25px;
z-index:25;
display:none;
}
js文件内容：
/*
* JQuery 拖拽插件
*/
(function ($) {
var option = {
interval: 3000, //图片自动播放的频率
playtime: null, //自动播放对象
current: 0, //当前显示的图片 在总图片 中时第几个
current_thumb: 0, //当前 图片缩略图 的下标
nmb_thumb_wrappers: 0, //总共的图片缩略图的个数
nmb_images_wrapper: 8, //当前的图片缩略图的下标
imglist: [], //图片数组
imgWidth: 75, //图片宽度
imgHeight: 75, //图片高度
iframeWidth: 0, //包含画廊的最外层iframe宽度
iframeHeight: 0, //包含画廊的最外层iframe宽度
imgSrcPrefix: "", //图片路径前缀
imgPadding: 4, //图片的间隔（padding）
$curImg: null, //当前显示的图片对象
imgDesc: null, ///图片描述
imgTypeControl: [], //图片类型控制
getImgTypeFun: null ///到后台获取数据的方法
};
/*
*当鼠标悬浮主面板的时候 显示控制栏
**/
var slideshowMouseEvent = function () {
$('#msg_slideshow').unbind('mouseenter')
.bind('mouseenter', showControls)
.andSelf()
.unbind('mouseleave')
.bind('mouseleave', hideControls);
};
/*显示缩略图 面板*/
var showControls = function () {
$('#msg_controls').stop().animate({ 'right': '15px' }, 500);
showImgTypeControls();
};
/*隐藏缩略图 面板*/
var hideControls = function () {
$('#msg_controls').stop().animate({ 'right': '-110px' }, 500);
hideImgTypeControls();
};
/*显示图片类型控制栏 面板*/
var showImgTypeControls = function () {
$('#imgTypeControl') && $('#imgTypeControl').stop().animate({ 'left': '15px' }, 100);
}
/*隐藏图片类型控制栏 面板*/
var hideImgTypeControls = function () {
$('#imgTypeControl') && $('#imgTypeControl').stop().animate({ 'left': '-' + $('#imgTypeControl').width() + 200 + 'px' }, 500);
};
/*开始运行动画*/
var play = function () {
next();
$('#msg_pause_play').addClass('msg_pause').removeClass('msg_play');
option.playtime = setInterval(next, option.interval);
};
/*停止动画 */
var pause = function () {
$('#msg_pause_play').addClass('msg_play').removeClass('msg_pause');
clearTimeout(option.playtime);
};
/*下一站图片*/
var next = function () {
if (option.current == option.imglist.length) { option.current = 0; }
++option.current;
showImage('r');
};
/*上一直图片*/
var prev = function () {
if (option.current == 1) { option.current = option.imglist.length + 1; }
--option.current;
showImage('l');
};
var shouCurImg = function (width, height, src, desc) {
var img = $('<img />').attr({ 'src': src });
var $image = $(img);
option.$curImg = $image;
resize($image, width, height);
$image.hide();
var imgDesc = $("<div></div>").attr({ "class": "imgDesc", "id": "imgDesc" }).html(desc);
$('#msg_wrapper').empty().append($image).append(imgDesc);
};
/*显示图片*/
var showImage = function (dir) {
if (option.imglist.length <= 0) {
resizeContent($(window).width(), $(window).height());
// $(".msg_slideshow").css({
// 'height': $(window).height()
// });
return;
}
/**
* the thumbs wrapper being shown, is always
* the one containing the current image
*/
alternateThumbs();
/**
* the thumb that will be displayed in full mode
*/
var $thumb = $('#msg_thumbs .msg_thumb_wrapper:nth-child(' + option.current_thumb + ')')
.find('a:nth-child(' + parseInt(option.current - option.nmb_images_wrapper * (option.current_thumb - 1)) + ')')
.find('img');
if ($thumb.length) {
var source = $thumb.attr('src');
var desc = $thumb.attr('alt');
var $currentImage = $('#msg_wrapper').find('img');
if ($currentImage.length) {
$($currentImage).remove();
shouCurImg($(window).width(), $(window).height(), source, desc);
// $currentImage.fadeOut(function () {
// $($currentImage).remove();
//
// });
} else {
shouCurImg($(window).width(), $(window).height(), source, desc);
}
} else { //this is actually not necessary since we have a circular slideshow
if (dir == 'r')
--option.current;
else if (dir == 'l')
++option.current;
alternateThumbs();
return;
}
};
/*显示 缩略图面板*/
var alternateThumbs = function () {
$('#msg_thumbs').find('.msg_thumb_wrapper:nth-child(' + option.current_thumb + ')').hide();
option.current_thumb = Math.ceil(option.current / option.nmb_images_wrapper);
/**
* if we reach the end, start from the beggining
*/
if (option.current_thumb > option.nmb_thumb_wrappers) {
option.current_thumb = 1;
option.current = 1;
}
/**
* if we are at the beggining, go to the end
*/
else if (option.current_thumb == 0) {
option.current_thumb = option.nmb_thumb_wrappers;
option.current = option.current_thumb * option.nmb_images_wrapper;
}
$('#msg_thumbs').find('.msg_thumb_wrapper:nth-child(' + option.current_thumb + ')').show();
};
/*显示下一个缩略图面板*/
var next_thumb = function () {
var $next_wrapper = $('#msg_thumbs').find('.msg_thumb_wrapper:nth-child(' + parseInt(option.current_thumb + 1) + ')');
if ($next_wrapper.length) {
$('#msg_thumbs').find('.msg_thumb_wrapper:nth-child(' + option.current_thumb + ')')
.fadeOut(function () {
++option.current_thumb;
$next_wrapper.fadeIn();
});
}
};
/*显示上一个缩略图面板*/
var prev_thumb = function () {
var $prev_wrapper = $('#msg_thumbs').find('.msg_thumb_wrapper:nth-child(' + parseInt(option.current_thumb - 1) + ')');
if ($prev_wrapper.length) {
$('#msg_thumbs').find('.msg_thumb_wrapper:nth-child(' + option.current_thumb + ')')
.fadeOut(function () {
--option.current_thumb;
$prev_wrapper.fadeIn();
});
}
};
/*从新设置图片的大小*/
var resize = function ($image, parDivWidth, parDivHeight) {
if ($image && $image[0] && $image[0].src) {
if (option.imglist.length <= 0) {
resizeContent($(window).width(), $(window).height());
// $(".msg_slideshow").css({
// 'height': $(window).height()
// });
return;
}
var theImage = new Image();
theImage.src = $image.attr("src");
var imgpar = $(".msg_wrapper");
var imgParWidth = parseInt(imgpar.width());
var imgParHeight = parseInt(imgpar.height());
if (parDivWidth) { imgParWidth = parDivWidth - 20; }
if (parDivHeight) { imgParHeight = parDivHeight - 20; }
$image.css({
'width': imgParWidth,
'height': imgParHeight
});
}
resizeContent(parDivWidth, parDivHeight);
};
/*设置 最外层div的宽度和 浏览器自适应*/
var resizeContent = function (parDivWidth, parDivHeight) {
$(".msg_slideshow").css({
'width': parDivWidth - 20,
'height': parDivHeight - 20
});
}
/*初始化方法 注册一些事件*/
var init = function () {
if (option.imglist.length <= 0) {
resizeContent($(window).width(), $(window).height());
// $(".msg_slideshow").css({
// 'height': $(window).height()
// });
}
/*添加图片类型控制*/
addImgTypeControl();
/*显示图片缩略图*/
showImgThumbs();
/**
* show the controls when
* mouseover the main container
*/
slideshowMouseEvent();
/**
* clicking the grid icon,
* shows the thumbs view, pauses the slideshow, and hides the controls
*/
$('#msg_grid').stop(true, true).bind('click', function (e) {
if (option.imglist.length > 0) {
hideControls();
$('#msg_slideshow').unbind('mouseenter').unbind('mouseleave');
pause();
$('#msg_thumbs').stop().animate({ 'top': '0px' }, 500);
e.preventDefault();
}
});
/**
* closing the thumbs view,
* shows the controls
*/
$('#msg_thumb_close').stop(true, true).bind('click', function (e) {
showControls();
slideshowMouseEvent();
$('#msg_thumbs').stop().animate({ 'top': '-230px' }, 500);
e.preventDefault();
});
/**
* pause or play icons
*/
$('#msg_pause_play').stop(true, true).bind('click', function (e) {
var $this = $(this);
if ($this.hasClass('msg_play'))
play();
else
pause();
e.preventDefault();
});
/**
* click controls next or prev,
* pauses the slideshow,
* and displays the next or prevoius image
*/
$('#msg_next').bind('click', function (e) {
pause();
next();
e.preventDefault();
});
$('#msg_prev').bind('click', function (e) {
pause();
prev();
e.preventDefault();
});
/**
* click next or previous on the thumbs wrapper
*/
$('#msg_thumb_next').stop(true, true).bind('click', function (e) {
next_thumb();
e.preventDefault();
});
$('#msg_thumb_prev').stop(true, true).bind('click', function (e) {
prev_thumb();
e.preventDefault();
});
/**
* clicking on a thumb, displays the image (alt attribute of the thumb)
*/
$('#msg_thumbs .msg_thumb_wrapper > a').stop(true, true).bind('click', function (e) {
var $this = $(this);
$('#msg_thumb_close').trigger('click');
var idx = $this.index();
var p_idx = $this.parent().index();
option.current = parseInt(p_idx * option.nmb_images_wrapper + idx + 1);
showImage();
e.preventDefault();
}).bind('mouseenter', function () {
var $this = $(this);
$this.stop().animate({ 'opacity': 1 });
}).bind('mouseleave', function () {
var $this = $(this);
$this.stop().animate({ 'opacity': 0.5 });
});
$("#msg_wrapper").mousemove(function (event) {
var imageDiv = $("#msg_wrapper").offset();
var x = event.clientX - imageDiv.left;
var y = event.clientY - imageDiv.top;
$("#imgDesc").css({ "top": y, "left": x });
});
};
/*初始化图片缩略图面板*/
var showImgThumbs = function () {
var thumbs = 0;
var msgThumbWrapper;
for (var i = 0; i < option.imglist.length; i++) {
if (i % option.nmb_images_wrapper == 0) {
msgThumbWrapper = $('<div></div>').attr({ "class": "msg_thumb_wrapper" });
$(msgThumbWrapper).insertBefore('#msg_thumb_next')
if (thumbs > 0) {
msgThumbWrapper.css({ 'display': "none" });
}
thumbs++;
}
var imgsrc = "";
if (option.imgSrcPrefix) {
imgsrc = option.imgSrcPrefix + option.imglist[i];
} else {
imgsrc = option.imglist[i];
}
var desc = option.imgDesc[i] ? option.imgDesc[i] : "";
var img = $("<img />").attr({ 'src': imgsrc, 'alt': desc }).css({
"width": option.imgWidth,
"height": option.imgHeight,
"display": "block",
"float": "left",
"margin": option.imgPadding
});
var a = $('<a />').attr('href', "#");
$(a).append(img);
msgThumbWrapper.append(a);
}
resizeImgThumb();
option.nmb_thumb_wrappers = thumbs;
/**
* start the slideshow
*/
if (option.imglist.length > 1) { play(); }
else {
next();
$('#msg_pause_play').addClass('msg_pause').removeClass('msg_play');
}
};
/*设置图片缩略图面板的大小*/
var resizeImgThumb = function () {
var layout = getThumbLayout();
var a = $("#msg_thumbs .msg_thumb_wrapper >a");
if (a && a.length > 0) {
var width = layout.colCount * (a[0].offsetWidth + option.imgPadding * 2), height = layout.lineCount * (a[0].offsetHeight + option.imgPadding * 2);
$(".msg_thumb_wrapper").css({ "width": width, "height": height });
$("#msg_thumbs").css({ "width": width, "height": height, "marginLeft": -((width + 60) / 2) });
} else {
$(".msg_thumb_wrapper").css({ "width": 0, "height": 0 });
$("#msg_thumbs").css({ "width": 0, "height": 0 });
}
};
/*获取图片缩略图面板的布局*/
var getThumbLayout = function () {
var res = {};
var model = 6;
if (option.nmb_images_wrapper < 6) {
model = 4;
} else if (option.nmb_images_wrapper < 8) {
model = 6;
} else if (option.nmb_images_wrapper < 9) {
model = 8;
} else if (option.nmb_images_wrapper < 12) {
model = 9;
} else if (option.nmb_images_wrapper) { model = 12; }
switch (model) {
case 4:
res.lineCount = 2;
res.colCount = 2;
break;
case 6:
res.lineCount = 2;
res.colCount = 3;
break;
case 8:
res.lineCount = 2;
res.colCount = 4;
break;
case 9:
res.lineCount = 3;
res.colCount = 3;
break;
case 12:
res.lineCount = 3;
res.colCount = 4;
break;
}
return res;
};
var addImgTypeControl = function () {
if (!option.imgTypeControl || option.imgTypeControl.length <= 0) return;
var $imgTypeControl = $("<div></div>").attr({ "class": "imgTypeControl", "id": "imgTypeControl" });
$('#msg_slideshow').append($imgTypeControl);
var imgType = null;
for (var i = 0; i < option.imgTypeControl.length; i++) {
imgType = option.imgTypeControl[i];
var imgTypeName = imgType.name;
var tmpText = imgType.text;
var radioId = "imgType_" + (imgTypeName ? imgTypeName : i + '');
var radio = $("<input>").attr({ "class": "imgType", "id": radioId, "type": "radio", "name": "imgType" });
if (i == 0) { radio.attr("checked", "true"); }
$(radio).bind("click", function () {
if (option.getImgTypeFun != null)
option.getImgTypeFun(this);
});
var label = $("<label></label>").attr("for", radioId).html(imgType.text);
$imgTypeControl.append(radio).append(label);
}
};
var reloadImageThumb = function (imgList, imgAlt) {
if (!imgList || imgList.length <= 0) { return; }
option.imgDesc = imgAlt;
option.imglist = imgList;
$(".msg_thumb_wrapper").remove();
showImgThumbs();
}
// drafting defind
$.fn.gallery = function (optionInput) {
// 合并函数
$.extend(true, option, optionInput);
init();
var galleryTools = {};
galleryTools.setContentSize = function (width, height) {
resize(option.$curImg, width, height);
}
galleryTools.setImgList = function (imglist, imgAlt) {
reloadImageThumb(imglist, imgAlt);
}
return galleryTools;
}
//放开设置播放图片列表
$.fn.setImgList = function (imglist, imgAlt) {
reloadImageThumb(imglist, imgAlt);
}
})(jQuery);我改编后的 案例： http://download.youkuaiyun.com/detail/stamsuper1/5508095
代码仅供参考
扫一扫
2119
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
