ASP. NET control development series-image switching web Control

The code of the widget page.
PicList. ascx
Copy codeThe Code is as follows:
<% @ 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: pixel PX;
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 ('lil ');
Var iFocusTxs = $ (iFocusTxID). getElementsByTagName ('lil ');
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 ('lil ');
Var iFocusTxs = $ (iFocusTxID). getElementsByTagName ('lil ');
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 ('lil ');
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,-average, 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 ('lil ');
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,-average, 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>

The following is the control background and an image code:
Copy codeThe Code is as follows:
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 ++)
{
// Title and thumbnail
If (I = 0)
{
UrImgTitle. InnerHtml + = "<li class = 'current'>" + listImages [I]. ImageTitle1 + "</li> ";
UlImgSmall. innerHtml + = "<li class = 'current'> </li> ";
}
Else
{
UrImgTitle. InnerHtml + = "<li class = 'normal'>" + listImages [I]. ImageTitle1 + "</li> ";
UlImgSmall. innerHtml + = "<li class = 'normal'> </li> ";
}
// Large image
UlImgBig. innerHtml + = "<li> <a href =" + listImages [I]. imageHref1 + "target = '_ blank'> </a> </li> ";
}
}
Private List <ShowImages> listImages;
Public List <ShowImages> ListImages
{
Get {return listImages ;}
Set {listImages = value ;}
}
}
// Image attributes
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 ;}
}
}

The implementation idea is to use the ShowImages set as an attribute of the control, and then facilitate the cyclic assignment of the set.
The following code calls the page:
Copy codeThe Code is as follows:
List <ShowImages> listImages = new List <ShowImages> ();
ShowImages image1 = new ShowImages ();
Image1.ImageAlt1 = "";
Image1.ImageHref1 = "http://www.jb51.net ";
Imag1.imagesrc1 = "http://b23.photo.store.qq.com/http_imgload.cgi? /Rurl4_ B = hour & a = 25 & B = 23 ";
Image1.ImageTitle1 = "this is my self-portrait ";
ListImages. Add (image1 );
ListImages. Add (image2 );
ListImages. Add (image3 );
ListImages. Add (image4 );
PicList1.ListImages = listImages;

OK, a simple control is implemented.
Author: cnblogs meow