js,css(公司框架直接可用):
http://pan.baidu.com/share/link?shareid=473682&uk=1041329344
js
<link href="/Js/jquery.fancybox/fancybox.css" rel="stylesheet" type="text/css" /> <script src="/Js/jquery.fancybox/jquery.fancybox-1.3.1.pack.js" type="text/javascript"></script> <script> $(function () { $(".lipicli").find("a[rel=group]").fancybox({ 'transitionIn': 'elastic', //设置动画效果. 可以设置为 'elastic', 'fade' 或 'none' 'transitionOut': 'elastic', //同上 'titlePosition': 'over', //设置标题显示的位置.可以设置成 'outside', 'inside' 或 'over' 'titleShow': true, //是否显示标题 'titleFormat': function (title, currentArray, currentIndex, currentOpts)//可以自定义标题的格式 { return '<span id="fancybox-title-over">' + (currentIndex + 1) + ' / ' + currentArray.length + " " + title + '</span>'; } }); }); </script>
html
<% List<DealMvc.Model.GameInfo> NewGame = (List<DealMvc.Model.GameInfo>)ViewData["NewGame"]; %> <div class="BabyShowList"> <ul> <% if (NewGame != null && NewGame.Count > 0) { string pic_url = string.Empty; foreach (DealMvc.Model.GameInfo item in NewGame) { pic_url = Url.ImageAutoSize(167, 167, item.ShowPic, ImageSizeMode.Size); StringBuilder sb = new StringBuilder(); string[] img = item.PicPath.Split(new char[] { ',' }, StringSplitOptions.RemoveEmptyEntries); if(img.Length>2)//从第二张开始 for (int i = 1; i < img.Length; i++) { sb.AppendFormat("<li><a href='{0}' rel='group'><img src=\"{0}\" title='{1}' alt='{1}' /></a></li>", img[i].ToString(), item.Name + " " + item.Number + "号 投票" + item.Votes + "数量"); } %> <li class="lipicli"> <div class="imgDiv"><a href='<%=item.ShowPic %>' rel='group' class="Show_Img " style="cursor:pointer;" ><img src="<%=pic_url %>" alt="<%=item.Name %> <%=item.Number %>号 投票<%=item.Votes %>数量" title="<%=item.Name %> <%=item.Number %>号 投票<%=item.Votes %>数量"></a></div> <div class="name"><b class="red"><%=item.Number %>号</b> <%=item.Name %></div> <div class="msg"><b class="red"><%=item.Votes %></b> 票</div> <a href="" class="btn"><img src="/App_Themes/UI/image/btn21.gif" alt=""></a> <ul style="display:none;"><%=sb.ToString() %></ul> </li> <%} } else {%> 暂无参赛信息 <%} %> </ul> <span class="clear_f"></span> </div>
效果图