• 摘自天极网的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><href="http://www.webdm.cn">网页代码站</a> - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码!</p>
    代码来自:http://www.webdm.cn/webcode/3f830430-d8d5-4cb6-8520-b0404d0fbae4.html
  • 相关阅读:
    Dbcp2抛出org.apache.commons.dbcp2.LifetimeExceededException
    DbUtils使用时抛出Cannot get a connection
    Spring注解【非单例】
    Exception in thread java.lang.IllegalThreadStateException
    eclipse选中变量,相同变量高亮。
    git push 403
    java虚拟机能并发的启动多少个线程
    产品的随想
    【转载】学习新东西的唯一方法
    Mysql错误问题记录
  • 原文地址:https://www.cnblogs.com/webdm/p/2152939.html
Copyright © 2020-2023  润新知