刚开始学习控件开发,写了一个web图片切换控件,欢迎大家拍砖.
贴出来控件页面的代码.
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![ExpandedBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<%
@ 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 >
< 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; }
}
}
{
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 = " 这是我的自画像 " ;
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;
listImages.Add(image2);
listImages.Add(image3);
listImages.Add(image4);
PicList1.ListImages = listImages;
ok 一个简单的控件就实现了