asp.net control Development Series Pictures Switch Web Controls _ Practical Tips

Post the code for the control page.
Piclist.ascx

Copy Code code 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: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>

Here is the code for the background of the control and a picture class:

Copy Code code 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 small figure
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>";
}
Big picture
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;}
}
}
Properties of a picture
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 realization idea is that the Showimages collection is treated as a property of the control. It then facilitates the collection loop assignment.
The following is the code for the page call:

Copy Code code as follows:

list<showimages> listimages = new list<showimages> ();
Showimages image1 = new Showimages ();
Image1. IMAGEALT1 = "Meow meow";
Image1. IMAGEHREF1 = "Http://www.jb51.net";
Image1. ImageSrc1 = "http://b23.photo.store.qq.com/http_imgload.cgi?/rurl4_b= E52b4cc5fe67c1a2dc328adb766f1633bfc02bb27fe17aa21ca1264a0dac599fc425faf65d1daac8ab7cb5923a15443882d9d0586694a0e5eb0671af6 0a2f6e739d3c15b1e52f2c518a00344fa791dbaee88cc43&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