前台页面:
JS和CSS的引用:
<script type=""<script type="text/javascript" src="../js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="../js/LightBox/jquery.lightbox-0.5.min.js"></script>
<link href="../js/LightBox/jquery.lightbox-0.5.css" rel="stylesheet" />
<script type="text/javascript" src="../js/myImgScroll/jquery.slideBox.js"></script>
<script type="text/javascript" charset="utf-8">
$(function ($) {
$('#scroll1 a').lightBox();
$('#scroll1 a').lightBox({
imageLoading: '../js/lightbox/images/lightbox-ico-loading.gif',//设置下载图片
imageBtnPrev: '../js/lightbox/images/lightbox-btn-prev.gif',//设置上一页按钮的图片地址
imageBtnNext: '../js/lightbox/images/lightbox-btn-next.gif',//设置下一页按钮的图片地址
imageBtnClose: '../js/lightbox/images/lightbox-btn-close.gif',//设置关闭按钮的图片地址
});
});
</script>
<style type="text/css">
.items li
{
float: left;
}
.items li img
{
border: 1px dashed #41bfde;
margin: 2px;
padding: 3px;
}
a
{
outline: none;
}
</style>
HTML:
<div style="width:500px; height: 300px; overflow-x:scroll;overflow-y:hidden;">
<div style="width: 9999px" id="scroll1">
<ul class="items">
<%=GetImg %>
</ul>
</div>
</div>
后台代码:
string strUrls = ImgUrls; //ImgUrls为各个图片的url地址组成的字符串,字符串以竖线(|)进行分割;
if (strUrls.LastIndexOf('|') == strUrls.Length - 1)
{
strUrls = strUrls.Substring(0, strUrls.Length - 1);
}
string[] Urls = strUrls.Split('|');
for (int i = 0; i < Urls.Length; i++)
{ // "../UploadFile/" 是图片所在的文件夹
GetImg += "<li><a href='../UploadFile/" + ImgUrls[i] + "'>";
GetImg += "<img alt='图片' width='220px' height='250px' src='../UploadFile/" + Urls[i] + "' /></a></li>";
}
说明:所用js或css文件没有上传,可以去LightBox官网查找