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

欢迎您访问我爱IT技术网，今天小编为你分享的编程技术是：【ASP.NET 控件开发系列之图片切换web控件】，下面是详细的讲解！

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

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="PicList.ascx.cs" Inherits="WebParts_PicList" %>
<style type="text/css">

*
{
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;
}


#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>

关于ASP.NET 控件开发系列之图片切换web控件的用户互动如下：

　　相关问题：

　　答： >>详细

　　相关问题：

　　答： >>详细

　　相关问题：

　　答： >>详细