代码简介:
来自经典论坛的一款仿天极网图片切换特效,含有详细的设置说明,使用起来比较简单。请在开始时设置图片目录、标题长度、图片切换的时间等,还可以设置Ad跟踪条的颜色,更多的自定义选项让它更能适合你网站的使用。
代码内容:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![ExpandedBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!
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
< 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