ASP.NET控件开发系列之图片切换web控件

刚开始学习asp.net控件开发,写了一个web图片切换控件,欢迎大家拍砖.

贴出来控件页面的代码.

PicList.ascx
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="PicList.ascx.cs" Inherits="WebParts_PicList" %>
<style type="text/CSS">
　  /* Reset style */
　  *
　  {
　　　  margin: 0;
　　　  padding: 0;
　　　  Word-break: break-all;
　  }
　  body
　  {
　　　  background: #fff;
　　　  color: #000000;
　　　  font: 12px/1.6em Helvetica, Arial, sans-serif;
　　　  margin-left: 0px;
　　　  margin-top: 0px;
　　　  margin-right: 0px;
　　　  margin-bottom: 0px;
　  }
　  h1, h2, h3, h4, h5, h6
　  {
　　　  font-size: 1em;
　  }
　  a
　  {
　　　  color: #0287CA;
　　　  text-decoration: none;
　  }
　  a:hover
　  {
　　　  text-decoration: underline;
　  }
　  ul, li
　  {
　　　  list-style: none;
　  }
　  fieldset, img
　  {
　　　  border: none;
　  }
　  legend
　  {
　　　  display: none;
　  }
　  em, strong, cite, th
　  {
　　　  font-style: normal;
　　　  font-weight: normal;
　  }
　  input, textarea, select, button
　  {
　　　  font: 12px Helvetica, Arial, sans-serif;
　  }
　  table
　  {
　　　  border-collapse: collapse;
　  }
　  html
　  {
　　　  overflow: -moz-scrollbars-vertical;
　  }
　  /*Always show Firefox scrollbar*/
　  /* iFocus style */
　  #ifocus
　  {
　　　  width: 650px;
　　　  height: 245px;
　　　  margin: 0px;
　　　  border: 1px solid #DEDEDE;
　　　  background: #F8F8F8;
　  }
　  #ifocus_pic
　  {
　　　  display: inline;
　　　  position: relative;
　　　  float: left;
　　　  width: 540px;
　　　  height: 225px;
　　　  overflow: hidden;
　　　  margin: 10px 0 0 10px;
　  }
　  #ifocus_piclist
　  {
　　　  position: absolute;
　  }
　  #ifocus_piclist li
　  {
　　　  width: 550px;
　　　  height: 225px;
　　　  overflow: hidden;
　  }
　  #ifocus_piclist img
　  {
　　　  width: 550px;
　　　  height: 225px;
　  }
　  #ifocus_btn
　  {
　　　  display: inline;
　　　  float: right;
　　　  width: 91px;
　　　  margin: 9px 9px 0 0;
　  }
　  #ifocus_btn li
　  {
　　　  width: 91px;
　　　  height: 57px;
　　　  cursor: pointer;
　　　  opacity: 0.5;
　　　  -moz-opacity: 0.5;
　　　  filter: alpha(opacity=50);
　  }
　  #ifocus_btn img
　  {
　　　  width: 75px;
　　　  height: 45px;
　　　  margin: 7px 0 0 11px;
　  }
　  #ifocus_btn .current
　  {
　　　  background: url(img/ifocus_btn_bg.gif) no-repeat;
　　　  opacity: 1;
　　　  -moz-opacity: 1;
　　　  filter: alpha(opacity=100);
　  }
　  #ifocus_opdiv
　  {
　　　  position: absolute;
　　　  left: 0;
　　　  bottom: 0;
　　　  width: 545px;
　　　  height: 35px;
　　　  background: #000;
　　　  opacity: 0.5;
　　　  -moz-opacity: 0.5;
　　　  filter: alpha(opacity=50);
　  }
　  #ifocus_tx
　  {
　　　  position: absolute;
　　　  left: 8px;
　　　  bottom: 8px;
　　　  color: #FFF;
　  }
　  #ifocus_tx .normal
　  {
　　　  display: none;
　  }
</style>

<script type="text/javascript">
function $(id) { return document.getElementById(id); }
function addLoadEvent(func){
 var oldonload = window.onload;
 if (typeof window.onload != 'function') {
  window.onload = func;
 } else {
  window.onload = function(){
　 oldonload();
　 func();
  }
 }
}
function moveElement(elementID,final_x,final_y,interval) {
  if (!document.getElementById) return false;
  if (!document.getElementById(elementID)) return false;
  var elem = document.getElementById(elementID);
  if (elem.movement) {
　  clearTimeout(elem.movement);
  }
  if (!elem.style.left) {
　  elem.style.left = "0px";
  }
  if (!elem.style.top) {
　  elem.style.top = "0px";
  }
  var xpos = parseInt(elem.style.left);
  var ypos = parseInt(elem.style.top);
  if (xpos == final_x && ypos == final_y) {
  return true;
  }
  if (xpos < final_x) {
　  var dist = Math.ceil((final_x - xpos)/10);
　  xpos = xpos + dist;
  }
  if (xpos > final_x) {
　  var dist = Math.ceil((xpos - final_x)/10);
　  xpos = xpos - dist;
  }
  if (ypos < final_y) {
　  var dist = Math.ceil((final_y - ypos)/10);
　  ypos = ypos + dist;
  }
  if (ypos > final_y) {
　  var dist = Math.ceil((ypos - final_y)/10);
　  ypos = ypos - dist;
  }
  elem.style.left = xpos + "px";
  elem.style.top = ypos + "px";
  var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
  elem.movement = setTimeout(repeat,interval);
}
function classNormal(iFocusBtnID,iFocusTxID){
 var iFocusBtns= $(iFocusBtnID).getElementsByTagName('li');
 var iFocusTxs = $(iFocusTxID).getElementsByTagName('li');
 for(var i=0; i<iFocusBtns.length; i++) {
  iFocusBtns[i].className='normal';
  iFocusTxs[i].className='normal';
 }
}
function classCurrent(iFocusBtnID,iFocusTxID,n){
 var iFocusBtns= $(iFocusBtnID).getElementsByTagName('li');
 var iFocusTxs = $(iFocusTxID).getElementsByTagName('li');
 iFocusBtns[n].className='current';
 iFocusTxs[n].className='current';
}
function iFocusChange() {
 if(!$('ifocus')) return false;
 $('ifocus').onmouSEOver = function(){atuokey = true};
 $('ifocus').onmouseout = function(){atuokey = false};
 var iFocusBtns = $('ifocus_btn').getElementsByTagName('li');
 var listLength = iFocusBtns.length;
 iFocusBtns[0].onmouseover = function() {
  moveElement('ifocus_piclist',0,0,5);
  classNormal('ifocus_btn','ifocus_tx');
  classCurrent('ifocus_btn','ifocus_tx',0);
 }
 if (listLength>=2) {
  iFocusBtns[1].onmouseover = function() {
　 moveElement('ifocus_piclist',0,-225,5);
　 classNormal('ifocus_btn','ifocus_tx');
　 classCurrent('ifocus_btn','ifocus_tx',1);
  }
 }
 if (listLength>=3) {
  iFocusBtns[2].onmouseover = function() {
　 moveElement('ifocus_piclist',0,-450,5);
　 classNormal('ifocus_btn','ifocus_tx');
　 classCurrent('ifocus_btn','ifocus_tx',2);
  }
 }
 if (listLength>=4) {
  iFocusBtns[3].onmouseover = function() {
　 moveElement('ifocus_piclist',0,-675,5);
　 classNormal('ifocus_btn','ifocus_tx');
　 classCurrent('ifocus_btn','ifocus_tx',3);
  }
 }
}
setInterval('autoiFocus()',3500);
var atuokey = false;
function autoiFocus() {
 if(!$('ifocus')) return false;
 if(atuokey) return false;
 var focusBtnList = $('ifocus_btn').getElementsByTagName('li');
 var listLength = focusBtnList.length;
 for(var i=0; i<listLength; i++) {
  if (focusBtnList[i].className == 'current') var currentNum = i;
 }
 if (currentNum==0&&listLength!=1 ){
  moveElement('ifocus_piclist',0,-225,5);
  classNormal('ifocus_btn','ifocus_tx');
  classCurrent('ifocus_btn','ifocus_tx',1);
 }
 if (currentNum==1&&listLength!=2 ){
  moveElement('ifocus_piclist',0,-450,5);
  classNormal('ifocus_btn','ifocus_tx');
  classCurrent('ifocus_btn','ifocus_tx',2);
 }
 if (currentNum==2&&listLength!=3 ){
  moveElement('ifocus_piclist',0,-675,5);
  classNormal('ifocus_btn','ifocus_tx');
  classCurrent('ifocus_btn','ifocus_tx',3);
 }
 if (currentNum==3 ){
  moveElement('ifocus_piclist',0,0,5);
  classNormal('ifocus_btn','ifocus_tx');
  classCurrent('ifocus_btn','ifocus_tx',0);
 }
 if (currentNum==1&&listLength==2 ){
  moveElement('ifocus_piclist',0,0,5);
  classNormal('ifocus_btn','ifocus_tx');
  classCurrent('ifocus_btn','ifocus_tx',0);
 }
 if (currentNum==2&&listLength==3 ){
  moveElement('ifocus_piclist',0,0,5);
  classNormal('ifocus_btn','ifocus_tx');
  classCurrent('ifocus_btn','ifocus_tx',0);
 }
}
addLoadEvent(iFocusChange);
</script>

<div align="center">
　  <div id="ifocus">
　　　  <div id="ifocus_pic">
　　　　　  <div id="ifocus_piclist" style="left: 0; top: 0;">
　　　　　　　  <ul runat="server" id="ulImgBig">
　　　　　　　  </ul>
　　　　　  </div>
　　　　　  <div id="ifocus_opdiv">
　　　　　  </div>
　　　　　  <div id="ifocus_tx">
　　　　　　　  <ul runat="server" id="urImgTitle">
　　　　　　　  </ul>
　　　　　  </div>
　　　  </div>
　　　  <div id="ifocus_btn">
　　　　　  <ul runat="server" id="ulImgSmall">
　　　　　  </ul>
　　　  </div>
　  </div>
</div>

下面是控件后台和一个图片类的代码:

public partial class WebParts_PicList : System.Web.UI.UserControl
{
　  PRotected void Page_Load(object sender, EventArgs e)
　  {
　　　  ShowImages();
　  }

　  public void ShowImages()
　  {
　　　  for (int i = 0; i < ListImages.Count; i++)
　　　  {
　　　　　  //标题和小图
　　　　　  if (i == 0)
　　　　　  {
　　　　　　　  urImgTitle.InnerHtml += "<li class='current'>" + listImages[i].ImageTitle1 + "</li>";
　　　　　　　  ulImgSmall.InnerHtml += "<li class='current'><img src='" + listImages[i].ImageSrc1 + "' alt='" + listImages[i].ImageAlt1 + "' /></li>";
　　　　　  }
　　　　　  else
　　　　　  {
　　　　　　　  urImgTitle.InnerHtml += "<li class='normal'>" + listImages[i].ImageTitle1 + "</li>";
　　　　　　　  ulImgSmall.InnerHtml += "<li class='normal'><img src='" + listImages[i].ImageSrc1 + "' alt='" + listImages[i].ImageAlt1 + "' /></li>";
　　　　　  }
　　　　　  //大图
　　　　　  ulImgBig.InnerHtml += "　  <li><a href=" + listImages[i].ImageHref1 + " target='_blank'><img src=" + listImages[i].ImageSrc1 + " alt=" + listImages[i].ImageAlt1 + " border='0' /></a></li>";
　　　　　 
　　　  }
　  }

　  private List<ShowImages> listImages;

　  public List<ShowImages> ListImages
　  {
　　　  get { return listImages; }
　　　  set { listImages = value; }
　  }
}

//图片的属性
public class ShowImages
{
　  string ImageSrc;
　  string ImageHref;
　  string ImageTitle;
　  string ImageAlt;

　  public string ImageAlt1
　  {
　　　  get { return ImageAlt; }
　　　  set { ImageAlt = value; }
　  }

　  public string ImageSrc1
　  {
　　　  get { return ImageSrc; }
　　　  set { ImageSrc = value; }
　  }

　  public string ImageHref1
　  {
　　　  get { return ImageHref; }
　　　  set { ImageHref = value; }
　  }

　  public string ImageTitle1
　  {
　　　  get { return ImageTitle; }
　　　  set { ImageTitle = value; }
　  }

}

实现思路是 ShowImages的集合当作控件的一个属性.然后便利集合循环赋值.

下面是页面调用的代码:

　  List<ShowImages> listImages = new List<ShowImages>();
　　　  ShowImages image1 = new ShowImages();
　　　  image1.ImageAlt1 = "喵喵";
　　　  image1.ImageHref1 = "http://qixuejia.cnblogs.com";
　　　  image1.ImageSrc1 = "http://b23.photo.store.QQ.com/http_imgload.cgi?/rurl4_b=e52b4cc5fe67c1a2dc328adb766f1633bfc02bb27fe17aa21ca1264a0dac599fc425faf65d1daac8ab7cb5923a15443882d9d0586694a0e5eb0671af60a2f6e739d3c15b1e52f2c518a00344fa791dbaee88cc43&a=25&b=23";
　　　  image1.ImageTitle1 = "这是我的自画像";
 

listImages.Add(image1);
　　　  listImages.Add(image2);
　　　  listImages.Add(image3);
　　　  listImages.Add(image4);

　  PicList1.ListImages = listImages;
 

ok 一个简单的控件就实现了

http://www.cnblogs.com/qixuejia/archive/2010/04/24/AspNet-Control-ListImg.html