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

 

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

源代码下载：https://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;