时间:2021-07-01 10:21:17 帮助过:6人阅读
- <br><%@ Control Language="C#" AutoEventWireup="true" CodeFile="PicList.ascx.cs" Inherits="WebParts_PicList" %> <br><style type="text/css"> <br>/* Reset style */ <br>* <br>{ <br>margin: 0; <br>padding: 0; <br>word-break: break-all; <br>} <br>body <br>{ <br>background: #fff; <br>color: #000000; <br>font: 12px/1.6em Helvetica, Arial, sans-serif; <br>margin-left: 0px; <br>margin-top: 0px; <br>margin-right: 0px; <br>margin-bottom: 0px; <br>} <br>h1, h2, h3, h4, h5, h6 <br>{ <br>font-size: 1em; <br>} <br>a <br>{ <br>color: #0287CA; <br>text-decoration: none; <br>} <br>a:hover <br>{ <br>text-decoration: underline; <br>} <br>ul, li <br>{ <br>list-style: none; <br>} <br>fieldset, img <br>{ <br>border: none; <br>} <br>legend <br>{ <br>display: none; <br>} <br>em, strong, cite, th <br>{ <br>font-style: normal; <br>font-weight: normal; <br>} <br>input, textarea, select, button <br>{ <br>font: 12px Helvetica, Arial, sans-serif; <br>} <br>table <br>{ <br>border-collapse: collapse; <br>} <br>html <br>{ <br>overflow: -moz-scrollbars-vertical; <br>} <br>/*Always show Firefox scrollbar*/ <br>/* iFocus style */ <br>#ifocus <br>{ <br>width: 650px; <br>height: 245px; <br>margin: 0px; <br>border: 1px solid #DEDEDE; <br>background: #F8F8F8; <br>} <br>#ifocus_pic <br>{ <br>display: inline; <br>position: relative; <br>float: left; <br>width: 540px; <br>height: 225px; <br>overflow: hidden; <br>margin: 10px 0 0 10px; <br>} <br>#ifocus_piclist <br>{ <br>position: absolute; <br>} <br>#ifocus_piclist li <br>{ <br>width: 550px; <br>height: 225px; <br>overflow: hidden; <br>} <br>#ifocus_piclist img <br>{ <br>width: 550px; <br>height: 225px; <br>} <br>#ifocus_btn <br>{ <br>display: inline; <br>float: right; <br>width: 91px; <br>margin: 9px 9px 0 0; <br>} <br>#ifocus_btn li <br>{ <br>width: 91px; <br>height: 57px; <br>cursor: pointer; <br>opacity: 0.5; <br>-moz-opacity: 0.5; <br>filter: alpha(opacity=50); <br>} <br>#ifocus_btn img <br>{ <br>width: 75px; <br>height: 45px; <br>margin: 7px 0 0 11px; <br>} <br>#ifocus_btn .current <br>{ <br>background: url(img/ifocus_btn_bg.gif) no-repeat; <br>opacity: 1; <br>-moz-opacity: 1; <br>filter: alpha(opacity=100); <br>} <br>#ifocus_opdiv <br>{ <br>position: absolute; <br>left: 0; <br>bottom: 0; <br>width: 545px; <br>height: 35px; <br>background: #000; <br>opacity: 0.5; <br>-moz-opacity: 0.5; <br>filter: alpha(opacity=50); <br>} <br>#ifocus_tx <br>{ <br>position: absolute; <br>left: 8px; <br>bottom: 8px; <br>color: #FFF; <br>} <br>#ifocus_tx .normal <br>{ <br>display: none; <br>} <br></style> <br><script type="text/javascript"> <br>function $(id) { return document.getElementById(id); } <br>function addLoadEvent(func){ <br>var oldonload = window.onload; <br>if (typeof window.onload != 'function') { <br>window.onload = func; <br>} else { <br>window.onload = function(){ <br>oldonload(); <br>func(); <br>} <br>} <br>} <br>function moveElement(elementID,final_x,final_y,interval) { <br>if (!document.getElementById) return false; <br>if (!document.getElementById(elementID)) return false; <br>var elem = document.getElementById(elementID); <br>if (elem.movement) { <br>clearTimeout(elem.movement); <br>} <br>if (!elem.style.left) { <br>elem.style.left = "0px"; <br>} <br>if (!elem.style.top) { <br>elem.style.top = "0px"; <br>} <br>var xpos = parseInt(elem.style.left); <br>var ypos = parseInt(elem.style.top); <br>if (xpos == final_x && ypos == final_y) { <br>return true; <br>} <br>if (xpos < final_x) { <br>var dist = Math.ceil((final_x - xpos)/10); <br>xpos = xpos + dist; <br>} <br>if (xpos > final_x) { <br>var dist = Math.ceil((xpos - final_x)/10); <br>xpos = xpos - dist; <br>} <br>if (ypos < final_y) { <br>var dist = Math.ceil((final_y - ypos)/10); <br>ypos = ypos + dist; <br>} <br>if (ypos > final_y) { <br>var dist = Math.ceil((ypos - final_y)/10); <br>ypos = ypos - dist; <br>} <br>elem.style.left = xpos + "px"; <br>elem.style.top = ypos + "px"; <br>var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")"; <br>elem.movement = setTimeout(repeat,interval); <br>} <br>function classNormal(iFocusBtnID,iFocusTxID){ <br>var iFocusBtns= $(iFocusBtnID).getElementsByTagName('li'); <br>var iFocusTxs = $(iFocusTxID).getElementsByTagName('li'); <br>for(var i=0; i<iFocusBtns.length; i++) { <br>iFocusBtns[i].className='normal'; <br>iFocusTxs[i].className='normal'; <br>} <br>} <br>function classCurrent(iFocusBtnID,iFocusTxID,n){ <br>var iFocusBtns= $(iFocusBtnID).getElementsByTagName('li'); <br>var iFocusTxs = $(iFocusTxID).getElementsByTagName('li'); <br>iFocusBtns[n].className='current'; <br>iFocusTxs[n].className='current'; <br>} <br>function iFocusChange() { <br>if(!$('ifocus')) return false; <br>$('ifocus').onmouseover = function(){atuokey = true}; <br>$('ifocus').onmouseout = function(){atuokey = false}; <br>var iFocusBtns = $('ifocus_btn').getElementsByTagName('li'); <br>var listLength = iFocusBtns.length; <br>iFocusBtns[0].onmouseover = function() { <br>moveElement('ifocus_piclist',0,0,5); <br>classNormal('ifocus_btn','ifocus_tx'); <br>classCurrent('ifocus_btn','ifocus_tx',0); <br>} <br>if (listLength>=2) { <br>iFocusBtns[1].onmouseover = function() { <br>moveElement('ifocus_piclist',0,-225,5); <br>classNormal('ifocus_btn','ifocus_tx'); <br>classCurrent('ifocus_btn','ifocus_tx',1); <br>} <br>} <br>if (listLength>=3) { <br>iFocusBtns[2].onmouseover = function() { <br>moveElement('ifocus_piclist',0,-450,5); <br>classNormal('ifocus_btn','ifocus_tx'); <br>classCurrent('ifocus_btn','ifocus_tx',2); <br>} <br>} <br>if (listLength>=4) { <br>iFocusBtns[3].onmouseover = function() { <br>moveElement('ifocus_piclist',0,-675,5); <br>classNormal('ifocus_btn','ifocus_tx'); <br>classCurrent('ifocus_btn','ifocus_tx',3); <br>} <br>} <br>} <br>setInterval('autoiFocus()',3500); <br>var atuokey = false; <br>function autoiFocus() { <br>if(!$('ifocus')) return false; <br>if(atuokey) return false; <br>var focusBtnList = $('ifocus_btn').getElementsByTagName('li'); <br>var listLength = focusBtnList.length; <br>for(var i=0; i<listLength; i++) { <br>if (focusBtnList[i].className == 'current') var currentNum = i; <br>} <br>if (currentNum==0&&listLength!=1 ){ <br>moveElement('ifocus_piclist',0,-225,5); <br>classNormal('ifocus_btn','ifocus_tx'); <br>classCurrent('ifocus_btn','ifocus_tx',1); <br>} <br>if (currentNum==1&&listLength!=2 ){ <br>moveElement('ifocus_piclist',0,-450,5); <br>classNormal('ifocus_btn','ifocus_tx'); <br>classCurrent('ifocus_btn','ifocus_tx',2); <br>} <br>if (currentNum==2&&listLength!=3 ){ <br>moveElement('ifocus_piclist',0,-675,5); <br>classNormal('ifocus_btn','ifocus_tx'); <br>classCurrent('ifocus_btn','ifocus_tx',3); <br>} <br>if (currentNum==3 ){ <br>moveElement('ifocus_piclist',0,0,5); <br>classNormal('ifocus_btn','ifocus_tx'); <br>classCurrent('ifocus_btn','ifocus_tx',0); <br>} <br>if (currentNum==1&&listLength==2 ){ <br>moveElement('ifocus_piclist',0,0,5); <br>classNormal('ifocus_btn','ifocus_tx'); <br>classCurrent('ifocus_btn','ifocus_tx',0); <br>} <br>if (currentNum==2&&listLength==3 ){ <br>moveElement('ifocus_piclist',0,0,5); <br>classNormal('ifocus_btn','ifocus_tx'); <br>classCurrent('ifocus_btn','ifocus_tx',0); <br>} <br>} <br>addLoadEvent(iFocusChange); <br></script> <br><div align="center"> <br><div id="ifocus"> <br><div id="ifocus_pic"> <br><div id="ifocus_piclist" style="left: 0; top: 0;"> <br><ul runat="server" id="ulImgBig"> <br></ul> <br></div> <br><div id="ifocus_opdiv"> <br></div> <br><div id="ifocus_tx"> <br><ul runat="server" id="urImgTitle"> <br></ul> <br></div> <br></div> <br><div id="ifocus_btn"> <br><ul runat="server" id="ulImgSmall"> <br></ul> <br></div> <br></div> <br></div> <br> <br>下面是控件后台和一个图片类的代码: <br><span><u></u></span> 代码如下:<pre class="brush:php;toolbar:false layui-box layui-code-view layui-code-notepad"><ol class="layui-code-ol"><li><br>public partial class WebParts_PicList : System.Web.UI.UserControl <br>{ <br>protected void Page_Load(object sender, EventArgs e) <br>{ <br>ShowImages(); <br>} <br>public void ShowImages() <br>{ <br>for (int i = 0; i < ListImages.Count; i++) <br>{ <br>//标题和小图 <br>if (i == 0) <br>{ <br>urImgTitle.InnerHtml += "<li class='current'>" + listImages[i].ImageTitle1 + "</li>"; <br>ulImgSmall.InnerHtml += "<li class='current'><img src='" + listImages[i].ImageSrc1 + "' alt='" + listImages[i].ImageAlt1 + "' /></li>"; <br>} <br>else <br>{ <br>urImgTitle.InnerHtml += "<li class='normal'>" + listImages[i].ImageTitle1 + "</li>"; <br>ulImgSmall.InnerHtml += "<li class='normal'><img src='" + listImages[i].ImageSrc1 + "' alt='" + listImages[i].ImageAlt1 + "' /></li>"; <br>} <br>//大图 <br>ulImgBig.InnerHtml += " <li><a href=" + listImages[i].ImageHref1 + " target='_blank'><img src=" + listImages[i].ImageSrc1 + " alt=" + listImages[i].ImageAlt1 + " border='0' /></a></li>"; <br>} <br>} <br>private List<ShowImages> listImages; <br>public List<ShowImages> ListImages <br>{ <br>get { return listImages; } <br>set { listImages = value; } <br>} <br>} <br>//图片的属性 <br>public class ShowImages <br>{ <br>string ImageSrc; <br>string ImageHref; <br>string ImageTitle; <br>string ImageAlt; <br>public string ImageAlt1 <br>{ <br>get { return ImageAlt; } <br>set { ImageAlt = value; } <br>} <br>public string ImageSrc1 <br>{ <br>get { return ImageSrc; } <br>set { ImageSrc = value; } <br>} <br>public string ImageHref1 <br>{ <br>get { return ImageHref; } <br>set { ImageHref = value; } <br>} <br>public string ImageTitle1 <br>{ <br>get { return ImageTitle; } <br>set { ImageTitle = value; } <br>} <br>} <br> <br>实现思路是 ShowImages的集合当作控件的一个属性.然后便利集合循环赋值. <br>下面是页面调用的代码: <br><span><u></u></span> 代码如下:<pre class="brush:php;toolbar:false layui-box layui-code-view layui-code-notepad"><ol class="layui-code-ol"><li><br>List<ShowImages> listImages = new List<ShowImages>(); <br>ShowImages image1 = new ShowImages(); <br>image1.ImageAlt1 = "喵喵"; <br>image1.ImageHref1 = "//www.gxlcms.com"; <br>image1.ImageSrc1 = "http://b23.photo.store.qq.com/http_imgload.cgi?/rurl4_b=e52b4cc5fe67c1a2dc328adb766f1633bfc02bb27fe17aa21ca1264a0dac599fc425faf65d1daac8ab7cb5923a15443882d9d0586694a0e5eb0671af60a2f6e739d3c15b1e52f2c518a00344fa791dbaee88cc43&a=25&b=23"; <br>image1.ImageTitle1 = "这是我的自画像"; <br>listImages.Add(image1); <br>listImages.Add(image2); <br>listImages.Add(image3); <br>listImages.Add(image4); <br>PicList1.ListImages = listImages; <br> <br>ok 一个简单的控件就实现了<br>作者:cnblogs 喵喵</li><li> </li><li> </li></ol></pre></li></ol></pre>