CNZZ首页四张图片平滑切换，优化了页面代码，更有利于SEO优化

 

演示地址见 http://www.cnzz.com/ 优化了部分页面代码

源代码下载：http://files.cnblogs.com/rednut/仿CNNZ首页四幅切换.rar

html:

< div  id ="smothSwitch" >
     < div  id ="adImg" >
         < a  href ="1111" >< img  src ="images/four-ad_01.gif"   /></ a >
         < a  href ="2222" >< img  src ="images/four-ad_02.gif"   /></ a >
         < a  href ="3333" >< img  src ="images/four-ad_03.gif"   /></ a >
         < a  href ="4444" >< img  src ="images/four-ad_04.gif"   /></ a >
     </ div >
     < ul  id ="adText" >
         < li > CNZZ站长统计 </ li >
         < li > CNZZ全景统计 </ li >
         < li > CNZZ站长助手 </ li >
         < li > CNZZ数据中心 </ li >
     </ ul >
</ div >

 

 

图片及链接直接放到了页面里面，并没有动态写入，这应该利于搜索引擎的抓取吧 ^-^

 

CSS:

 

#smothSwitch ul, #smothSwitch li {} { margin:0; padding:0; list-style:none;}
#smothSwitch {} { width:590px; float:left; border:1px solid #C9D3E0;}
#smothSwitch #adImg {} { width:100%; height:119px; float:left; clear:both; overflow:hidden; position:relative;}
#smothSwitch #adImg a {} {}
#smothSwitch #adImg img {} { border:0; float:left; clear:both; /**//*filter:Alpha(opacity=50); opacity:0.5;*/}
#smothSwitch ul {} { width:100%; float:left; clear:both; height:34px; background:url(../images/grey-bg.gif) repeat-x;}
#smothSwitch ul li {} { width:147px; height:33px; float:left; font-size:12px; line-height:30px; text-align:center; font-family:Arial; cursor:pointer;}
#smothSwitch ul .focus {} { background:url(../images/grey-pic.gif) no-repeat;}

 

javascript:

 

var  timeDelay  =   5 ;  // 定义图片延迟显示的秒数
var  currentId  =   0 ; 
var  slidint;

function  $(p) {
    return document.getElementById(p);    
}

// 控制当前焦点按钮样式
function  setFocus(n) {
    var imgList = document.getElementById("adImg").getElementsByTagName("img");    
    for (i=0;i<imgList.length;i++){    
        imgList[i].style.opacity = 0;
        imgList[i].style.filter = "alpha(opacity=0)";
    }
    for ( i=0;i<imgList.length;i++ ){
        if ( i == n ){
            $("adText").getElementsByTagName("li")[i].className = "focus";
            $("adImg").getElementsByTagName("a")[i].style.display = "block";
        }
        else{
            $("adText").getElementsByTagName("li")[i].className = "";
            $("adImg").getElementsByTagName("a")[i].style.display = "none";
        }
    }
    imgAlpha();
}

// 图片渐显
function  imgAlpha() {
    var temp = 0;
    var temp2 = 0;
    var imgList = document.getElementById("adImg").getElementsByTagName("img");    
    function alphaUp(){
        if( temp < 1 && temp2 <100 )
        {
            for (i=0;i<imgList.length;i++){
            imgList[i].style.opacity = temp;
            imgList[i].style.filter = "alpha(opacity="+ temp2 +")";
            }
            temp += 0.05;
            temp2 += 5;
        }
    }
    a = setInterval(alphaUp,10);
}

// 播放下一张
function  playnext() {
    if(currentId == 3){
        currentId = 0;
    }
    else{
        currentId++;
    };
    setFocus(currentId);
    playit();
}

function  playit() {
    slidint = setTimeout(playnext,timeDelay*1000);
}

function  stopit() {
    clearTimeout(slidint);
}

// 鼠标滑过及离开图片的操作
function  checkMouseOver() {
    $("adImg").onmouseover = function(){
        stopit();
    }
    $("adImg").onmouseout = function(){
        playit();
    }
}

// 点击标签按钮后的操作
function  checkClick() {
    var btnList = document.getElementById("adText").getElementsByTagName("li");
    for (i=0;i<btnList.length;i++){    
        btnList[i].id = "tempBtn"+i;
        btnList[i].onclick = function(){
            currentId = this.id.slice(-1);
            setFocus(currentId);
            stopit();
            playit();
        }
    }
    
}

function  smothSwitchAd() {
    $("adText").getElementsByTagName("li")[0].className = "focus";
    checkMouseOver();
    checkClick();
    playit();
}

window.onload  =  smothSwitchAd;

转载于:https://www.cnblogs.com/rednut/archive/2009/05/01/1447332.html