<%@ Control Language="C#" AutoEventWireup="true" CodeFile="" 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 (id); }
function addLoadEvent(func){
var oldonload = ;
if (typeof != 'function') {
= func;
} else {
= function(){
oldonload();
func();
}
}
}
function moveElement(elementID,final_x,final_y,interval) {
if (!) return false;
if (!(elementID)) return false;
var elem = (elementID);
if () {
clearTimeout();
}
if (!) {
= "0px";
}
if (!) {
= "0px";
}
var xpos = parseInt();
var ypos = parseInt();
if (xpos == final_x && ypos == final_y) {
return true;
}
if (xpos < final_x) {
var dist = ((final_x - xpos)/10);
xpos = xpos + dist;
}
if (xpos > final_x) {
var dist = ((xpos - final_x)/10);
xpos = xpos - dist;
}
if (ypos < final_y) {
var dist = ((final_y - ypos)/10);
ypos = ypos + dist;
}
if (ypos > final_y) {
var dist = ((ypos - final_y)/10);
ypos = ypos - dist;
}
= xpos + "px";
= ypos + "px";
var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
= setTimeout(repeat,interval);
}
function classNormal(iFocusBtnID,iFocusTxID){
var iFocusBtns= $(iFocusBtnID).getElementsByTagName('li');
var iFocusTxs = $(iFocusTxID).getElementsByTagName('li');
for(var i=0; i<; 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[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 = ;
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 >
<div >
<div style="left: 0; top: 0;">
<ul runat="server" >
</ul>
</div>
<div >
</div>
<div >
<ul runat="server" >
</ul>
</div>
</div>
<div >
<ul runat="server" >
</ul>
</div>
</div>
</div>