焦点图片轮换

txf2004

浏览: 7040570 次
性别:
来自: 上海

最近访客更多访客>>

east_java

u012363178

wangyy

GDGZWQZ

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript

JavaScript CSS 制造 HTML XHTML

http://www.corange.cn//uploadfiles/1018_71773.jpg

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<htmlxmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> 

<title>佐佐制造byzuo.cn---焦点图片第三季</title> 

<styletype="text/css"> 
/*Resetstyle*/
*{margin:0;padding:0;word-break:break-all;}
body{background:#FFF;color:#333;font:12px/1.6emHelvetica,Arial,sans-serif;}
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:12pxHelvetica,Arial,sans-serif;}
table{border-collapse:collapse;}
html{overflow:-moz-scrollbars-vertical;}/*AlwaysshowFirefoxscrollbar*/
/*iFocusstyle*/
#ifocus{width:525px;height:245px;margin:20px;border:1pxsolid#DEDEDE;background:#F8F8F8;}
#ifocus_pic{display:inline;position:relative;float:left;width:410px;height:225px;overflow:hidden;margin:10px0010px;}
#ifocus_piclist{position:absolute;}
#ifocus_piclistli{width:410px;height:225px;overflow:hidden;}
#ifocus_piclistimg{width:410px;height:225px;}
#ifocus_btn{display:inline;float:right;width:91px;margin:9px9px00;}

#ifocus_btnli{width:91px;height:57px;cursor:pointer;opacity:0.5;-moz-opacity:0.5;filter:alpha(opacity=50);} 
#ifocus_btnimg{width:75px;height:45px;margin:7px0011px;}

#ifocus_btn.current{background:url(http://www.byzuo.cn/demo/iFocus/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:410px;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> 

<scripttype="text/javascript"> 
function$(id){returndocument.getElementById(id);}
functionaddLoadEvent(func){

varoldonload=window.onload; 
if(typeofwindow.onload!='function'){

window.onload=func; 
}else{

window.onload=function(){ 
oldonload();
func();
}
}
}
functionmoveElement(elementID,final_x,final_y,interval){
if(!document.getElementById)returnfalse;
if(!document.getElementById(elementID))returnfalse;

varelem=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"; 
}

varxpos=parseInt(elem.style.left); 

varypos=parseInt(elem.style.top); 

if(xpos==final_x&&ypos==final_y){ 
returntrue;
}

if(xpos<final_x){ 

vardist=Math.ceil((final_x-xpos)/10); 

xposxpos=xpos+dist; 
}

if(xpos>final_x){ 

vardist=Math.ceil((xpos-final_x)/10); 

xposxpos=xpos-dist; 
}

if(ypos<final_y){ 

vardist=Math.ceil((final_y-ypos)/10); 

yposypos=ypos+dist; 
}

if(ypos>final_y){ 

vardist=Math.ceil((ypos-final_y)/10); 

yposypos=ypos-dist; 
}

elem.style.left=xpos+"px"; 

elem.style.top=ypos+"px"; 

varrepeat="moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")"; 

elem.movement=setTimeout(repeat,interval); 
}
functionclassNormal(iFocusBtnID,iFocusTxID){

variFocusBtns=$(iFocusBtnID).getElementsByTagName('li'); 

variFocusTxs=$(iFocusTxID).getElementsByTagName('li'); 

for(vari=0;i<iFocusBtns.length;i++){ 

iFocusBtns[i].className='normal'; 

iFocusTxs[i].className='normal'; 
}
}
functionclassCurrent(iFocusBtnID,iFocusTxID,n){

variFocusBtns=$(iFocusBtnID).getElementsByTagName('li'); 

variFocusTxs=$(iFocusTxID).getElementsByTagName('li'); 

iFocusBtns[n].className='current'; 

iFocusTxs[n].className='current'; 
}
functioniFocusChange(){
if(!$('ifocus'))returnfalse;

$('ifocus').onmouseover=function(){atuokey=true}; 

$('ifocus').onmouseout=function(){atuokey=false}; 

variFocusBtns=$('ifocus_btn').getElementsByTagName('li'); 

varlistLength=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()',5000);

varatuokey=false; 
functionautoiFocus(){
if(!$('ifocus'))returnfalse;
if(atuokey)returnfalse;

varfocusBtnList=$('ifocus_btn').getElementsByTagName('li'); 

varlistLength=focusBtnList.length; 

for(vari=0;i<listLength;i++){ 

if(focusBtnList[i].className=='current')varcurrentNum=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> 

</head> 

<body> 

<divid="ifocus"> 

<divid="ifocus_pic"> 

<divid="ifocus_piclist"style="left:0;top:0;"> 

<ul> 

<li><ahref="#"><imgsrc="http://www.byzuo.cn/demo/iFocus/img/01.jpg"alt=""/></a></li> 

<li><ahref="#"><imgsrc="http://www.byzuo.cn/demo/iFocus/img/02.jpg"alt=""/></a></li> 

<li><ahref="#"><imgsrc="http://www.byzuo.cn/demo/iFocus/img/03.jpg"alt=""/></a></li> 

<li><ahref="#"><imgsrc="http://www.byzuo.cn/demo/iFocus/img/04.jpg"alt=""/></a></li> 

</ul> 

</div> 

<divid="ifocus_opdiv"></div> 

<divid="ifocus_tx"> 

<ul> 

<liclass="current">火箭85-78马刺姚明依旧像新秀a1</li> 

<liclass="normal">阿德尔曼：姚明进攻太犹豫火箭还有很长路要走b2</li> 

<liclass="normal">阿联脚伤未出场卡特意外受伤网队加时险胜热队c3</li> 

<liclass="normal">帕杜惊讶能留住郑智英媒称查尔顿升超要靠d4</li> 

</ul> 

</div> 

</div> 

<divid="ifocus_btn"> 

<ul> 

<liclass="current"><imgsrc="http://www.byzuo.cn/demo/iFocus/img/btn_01.jpg"alt=""/></li> 

<liclass="normal"><imgsrc="http://www.byzuo.cn/demo/iFocus/img/btn_02.jpg"alt=""/></li> 

<liclass="normal"><imgsrc="http://www.byzuo.cn/demo/iFocus/img/btn_03.jpg"alt=""/></li> 

<liclass="normal"><imgsrc="http://www.byzuo.cn/demo/iFocus/img/btn_04.jpg"alt=""/></li> 

</ul> 

</div> 

</div><!--ifocusend--> 

</body> 

</html> 

分享到：

精致导航下拉菜单 | JavaScript FAQ（九）

2008-12-16 10:27
浏览 1078
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

焦点图片轮换

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

焦点图片轮换

评论

发表评论

相关推荐

jQuery+Ajax+PHP+Mysql实现分页显示数据

Tab页界面，用jQuery及Ajax技术实现

自动提示结果

visibility和display区别

可放在网页旁边的导航菜单，点击向右边展开

图片加载loading...

iframe加载loading...

发一个选项卡动态增删的效果..

复选框问题,将选定的值在textarea显示

表格复选和复选变色效果

表格数据排序

检测密码强度

CNL Tree Menu Ver1.02无限级树形菜by CNLei枫岩

点击按钮，实现复制网址的代码

完全去除页面滚动条的方法

支持IE和火狐浏览器的加入收藏夹js代码

javascript实现换皮肤的一种思路

yiu简易网页调色板功能调用代码

table排序类,点击第一行标题可以排序

表格隔行换色+鼠标经过变色(ie6,ie7,ff)

最近访客更多访客>>