<style>
        *{padding: 0; margin: 0;}
        ul li{list-style: none;}
        .main{ width: 660px;  margin: 0 auto; position: relative; overflow: hidden;}
        .main #show { width: 660px; height: 370px; overflow: hidden; position: relative;}
        .main #show li{ width: 660px; height: 370px; overflow: hidden; float: left; position: absolute; top: 0; left: 0; z-index: 0;}
        .main #show span { width: 50px; height: 50px; position: absolute; top: 160px; cursor: pointer;z-index: 10000;}
        .main #show .pre {background:url(images/lBtn.png) bottom no-repeat; left: 10px; filter: alpha(opacity:0); opacity: 0;}
        .main #show .next {background:url(images/rBtn.png) bottom no-repeat; right: 10px; filter: alpha(opacity:0); opacity: 0;}
        .main #show .markLeft{width: 330px; height: 370px; position:absolute; left: 0; z-index: 9999;}
        .main #show .markRight{width: 330px; height: 370px; position:absolute; right: 0; z-index: 9999;}
        .main #ico{ width: 660px; height: 125px; margin-top: 5px; overflow: hidden;}
        .main #ico ul{position: absolute;left: 0}
        .main #ico li{ float: left; margin-right: 4px; filter: alpha(opacity=60); opacity: 0.6;}
    </style>

<script  src="main.js"></script>
function getStyle(obj,name){
    if(obj.currentStyle){
        return obj.currentStyle[name];
    }else{
        return getComputedStyle(obj,false)[name]; 
    }
}
function startMove(obj,attr,iTarget){
    clearInterval(obj.timer);
    obj.timer=setInterval(function(){
        var cur = 0;
        if(attr=="opacity"){
            cur = Math.round(parseFloat(getStyle(obj,attr))*100);
        }else{
            cur = parseInt(getStyle(obj,attr));
        }
        var speed=(iTarget-cur)/6;
        speed = speed>0?Math.ceil(speed):Math.floor(speed);
        if(cur==iTarget){
            clearInterval(obj.timer);
        }else{
            if(attr=="opacity"){
                obj.style.filter='alpha(opacity:'+(cur+speed)+')';
                obj.style[attr]=(cur+speed)/100;
            }else{
                obj.style[attr]=cur+speed+"px";
            }
        }
    },30);
}

<script>
        //获取指定样式
        function getByClass(oParent, sClass){
            var aEle=oParent.getElementsByTagName("*");
            var aResult=[];
            for(var i=0;i<aEle.length;i++){
                if(aEle[i].className==sClass){
                    aResult.push(aEle[i]);
                }
            }
            return aResult;
        }
        window.onload=function(){
            var oDiv=document.getElementById("main");
            var oBtnPrev=getByClass(oDiv,'pre')[0];
            var oBtnNext=getByClass(oDiv,'next')[0];
            var oMarkLeft=getByClass(oDiv,'markLeft')[0];
            var oMarkRight=getByClass(oDiv,'markRight')[0];
            var oDivSmall=getByClass(oDiv,'small')[0];
            var oUlSmall=oDivSmall.getElementsByTagName("ul")[0];
            var aLiSmall=oDivSmall.getElementsByTagName("li");
            var oUlBig=getByClass(oDiv,'big')[0];
            var aLiBig =oUlBig.getElementsByTagName("li");
            //左右按钮显示隐藏
            oBtnPrev.onmouseover=oMarkLeft.onmouseover=function(){
                startMove(oBtnPrev,'opacity',100);
            }
            oBtnPrev.onmouseout=oMarkLeft.onmouseout=function(){
                startMove(oBtnPrev,'opacity',0);
            }

            oBtnNext.onmouseover=oMarkRight.onmouseover=function(){
                startMove(oBtnNext,'opacity',100);
            }
            oBtnNext.onmouseout=oMarkRight.onmouseout=function(){
                startMove(oBtnNext,'opacity',0);
            }
            //大图切换
            var nowZindex=2;
            var now=0;
            oUlSmall.style.width=aLiSmall.length*aLiSmall[0].offsetWidth+100+"px";
            for(var i=0; i<aLiSmall.length;i++){
                aLiSmall[i].index=i;
                aLiSmall[i].onclick=function(){
                    if(this.index==now)return;
                    now=this.index;
                    tab();
                };
                aLiSmall[i].onmouseover=function(){
                    startMove(aLiSmall[this.index],'opacity',100);
                }
                aLiSmall[i].onmouseout=function(){
                    if(this.index!=now){
                        startMove(aLiSmall[this.index],'opacity',60);
                    }
                }
            }
            function tab(){
                aLiBig[now].style.zIndex=nowZindex++;
                for(var i=0;i<aLiSmall.length;i++){
                    startMove(aLiSmall[i],'opacity',60);
                }
                startMove(aLiSmall[now],'opacity',100);
                aLiBig[now].style.height=0;
                startMove(aLiBig[now],'height',370);
                if(now==0){
                    startMove(oUlSmall,'left',0);
                }else if(now==aLiSmall.length-1){
                    startMove(oUlSmall,'left',-(now-2)*aLiSmall[0].offsetWidth);
                }else{
                    startMove(oUlSmall,'left',-(now-1)*aLiSmall[0].offsetWidth);
                }
            }
            //左右按钮显示焦点图
            oBtnPrev.onclick=function(){
                now--;
                if(now==-1){
                    now=aLiSmall.length-1;
                }
                tab();
            };
            oBtnNext.onclick=function(){
                now++;
                if(now==aLiSmall.length){
                    now=0;
                }
                tab();
            };

            //自动播放
            var timer=setInterval(oBtnNext.onclick,2000);
            oDiv.onmouseover=function(){
                clearInterval(timer);
            };
            oDiv.onmouseout=function(){
                timer=setInterval(oBtnNext.onclick,2000);
            };

        }
    </script>

<div class="main" id="main">
    <ul id="show" class="big">
        <li style="z-index: 1;"><img src="images/1.jpg" alt=""></li>
        <li><img src="images/2.jpg" alt=""></li>
        <li><img src="images/3.jpg" alt=""></li>
        <li><img src="images/4.jpg" alt=""></li>
        <li><img src="images/5.jpg" alt=""></li>
        <a href="javascript:;" class="markLeft"></a>
        <a href="javascript:;" class="markRight"></a>
        <span class="pre"></span>
        <span class="next"></span>
    </ul>
    <div id="ico" class="small">
    <ul>
        <li style="filter: 100;opacity: 1;"><img src="images/1.jpg" width="216px" alt=""></li>
        <li><img src="images/2.jpg" width="216px" alt=""></li>
        <li><img src="images/3.jpg" width="216px" alt=""></li>
        <li><img src="images/4.jpg" width="216px" alt=""></li>
        <li><img src="images/5.jpg" width="216px" alt=""></li>
    </ul>
    </div>
</div>