摘自天极网的JS卡通图片切换代码

代码简介：

来自经典论坛的一款仿天极网图片切换特效，含有详细的设置说明，使用起来比较简单。请在开始时设置图片目录、标题长度、图片切换的时间等，还可以设置Ad跟踪条的颜色，更多的自定义选项让它更能适合你网站的使用。

代码内容：

View Code

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >  
< html  xmlns ="http://www.w3.org/1999/xhtml" >  
< head >  
< title > 摘自天极网的JS卡通图片切换代码 - www.webdm.cn </ title >  
< style  type ="text/css" >  
body,html {  
margin : 0px ;  
height : 100% ;  
overflow : hidden ; }  
div#adBox {  
width : 202px ;  
height : 260px ;  
border : 6px #999999 solid ;  
position : absolute ;  
overflow : hidden ;  
top : 50% ;  
left : 50% ;  
margin : -133px 0px 0px -103px ; }  
div#adBox .imgBox {  
height : 220px ;  
width : 200px ;  
background : #888888 ;  
padding : 1px 1px 0px 1px ; }  
div#adBox #control {  
width : 201px ;  
height : 12px ;  
background : #CCCCCC ;  
overflow : hidden ;  
border-left : 1px #666666 solid ; }  
div#adBox #control div {  
width : 12px ;  
height : 12px ;  
font-size : 9px ;  
font-family : Arial, Helvetica, sans-serif ;  
line-height : 13px ;  
text-indent : 1px ;  
text-align : center ;  
float : right ;  
margin-left : 1px ;  
cursor : pointer ;  
background : #666666 ; }  
div#adBox #info {  
height : 30px ;  
overflow : hidden ;  
background : #999999 ;  
border-top : 1px #666666 solid ;  
font-size : 12px ;  
color : #333333 ;  
line-height : 30px ; }  
div#adBox #info a {  
color : #333333 ;  
text-decoration : none ; }  
div#adBox #info a:hover {  
color : #003366 ;  
text-decoration : underline ; }  
</ style >  
< script  type ="text/javascript" >  
var  obj = document.getElementById; 
var  currentAd = 0 ; 
var  adTimer; 
var  baseurl = " http://www.webdm.cn/images/20091005/ " ; // 图片目录 
var  maxinfo = 18 ; // 标题长度 
var  adDelay = 3000 ; // 切换时间 
var  controlItemId = " controlitem " ; // 根据自己的页面为跟踪条取ID前缀 
var  mapcolor = " #003366 " ; // Ad跟踪条颜色，建议与信息栏的a:hover一样 
var  imglink = new  Array(); 
imglink[ 0 ] = new  Array( " maplestory_fGsUHCiylFEk.jpg " , " # " , " 第二届冒险岛征文大赛火热报名中 " , "" ) 
imglink[ 1 ] = new  Array( " haizeiwang_yIdvHnbKRR5Z.jpg " , " # " , " 《海贼王》第2部明日在江汉影城上映 " , "" ) 
imglink[ 2 ] = new  Array( " naruto_zxndhBwQnt1D.jpg " , " # " , " NARUTO，我最钟爱的角色投票 " , "" ) 
imglink[ 3 ] = new  Array( " lionking_g18UfhueAZlS.jpg " , " # " , " 《狮子王2》制片方宣称进入最后剪辑合成阶段 " , "" ) 
imglink[ 4 ] = new  Array( " dragoncat_5OuvU8f1PpAR.jpg " , " # " , " 荷兰动物学家已对龙猫的真实身份揭谜 " , "" ) 
imglink[ 5 ] = new  Array( " qianxun_wGdPvRpQAXU7.jpg " , " # " , " 日本动漫高手12日赴武汉进行学术交流 " , "" ) 
for (i = 0 ;i < imglink.length;i ++ ){ 
if (imglink[i][ 2 ].length < maxinfo)imglink[i][ 3 ] = imglink[i][ 2 ]; 
else  imglink[i][ 3 ] = imglink[i][ 2 ].substring( 0 ,maxinfo - 3 ) + " ... " ;} 
</ script >  
</ head >  
< body >  
< div  id ="adBox" >  
< div  class ="imgBox" >< img  src ="http://www.webdm.cn/images/20091005/maplestory_fGsUHCiylFEk.jpg"  style ="filter: progid:DXImageTransform.Microsoft.GradientWipe

(GradientSize=0.25,wipestyle=1,motion=forward);"  id ="show"  alt =""   /></ div >  
< div  id ="control" ></ div >  
< div  id ="info" ></ div >  
</ div >  
< script  type ="text/javascript" >  
for (i = 0 ;i < imglink.length;i ++ ){ 
var  itemBox = document.createElement(); 
itemBox.innerHTML = " <div id=' " + controlItemId + i + " '> " + (i + 1 ) + " </div> " ; 
control.appendChild(itemBox);} 
var  controlItem = obj( " control " ).getElementsByTagName( " div " ); 
function  changeImg(){ 
obj( " show " ).filters[ 0 ].apply(); 
obj( " show " ).src = baseurl + imglink[currentAd][ 0 ]; 
obj( " show " ).filters[ 0 ].play(); 
obj( " info " ).innerHTML = " <a href=' " + imglink[currentAd][ 1 ] + " ' title=' " + imglink[currentAd][ 2 ] + " '> " + imglink[currentAd][ 3 ] + " </a> " ; 
for (i = 0 ;i < controlItem.length;i ++ ){ 
controlItem[i].style.backgroundColor = (i == currentAd) ? mapcolor: " #666666 " ;} 
currentAd ++ ; 
currentAd = (currentAd == imglink.length) ? 0 :currentAd; 
adTimer = setTimeout( " changeImg() " ,adDelay);} 
changeImg(); 
for (i = 0 ;i < controlItem.length;i ++ ){ 
controlItem[i].onclick = function (){ 
clearTimeout(adTimer); 
currentAd = parseInt( this .id.substring( this .id.length - 1 , this .id.length)); 
changeImg();}; 
} 
obj( " info " ).onmouseover = function (){clearTimeout(adTimer)}; 
obj( " info " ).onmouseout = function (){adTimer = setTimeout( " changeImg() " ,adDelay)}; 
</ script >  
</ body >  
</ html >
< br  />
< p >< a  href ="http://www.webdm.cn" > 网页代码站 </ a >  - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码！ </ p >
代码来自：http://www.webdm.cn/webcode/3f830430-d8d5-4cb6-8520-b0404d0fbae4.html

 

 

转载于:https://www.cnblogs.com/webdm/archive/2011/08/25/2152939.html