原生JS实现 轮播效果

<div id="playImages" class="play">
    <ul class="big_pic">
        <div class="prev"></div>
        <div class="next"></div>

        <a href="javascript:" class="mark_left"></a>
        <a href="javascript:" class="mark_right"></a>
        <div class="bg"></div>

        <li style="z-index: 1;"><img src="../Image/effectImages/Ps123Net_0006.jpg" alt=""/></li>
        <li><img src="../Image/effectImages/Ps123Net_0007.jpg" alt=""/></li>
        <li><img src="../Image/effectImages/Ps123Net_0008.jpg" alt=""/></li>
        <li><img src="../Image/effectImages/Ps123Net_0009.jpg" alt=""/></li>
        <li><img src="../Image/effectImages/Ps123Net_0010.jpg" alt=""/></li>
        <li><img src="../Image/effectImages/Ps123Net_0011.jpg" alt=""/></li>
        <li><img src="../Image/effectImages/Ps123Net_0012.jpg" alt=""/></li>
        <li><img src="../Image/effectImages/Ps123Net_0013.jpg" alt=""/></li>
        <li><img src="../Image/effectImages/Ps123Net_0014.jpg" alt=""/></li>
    </ul>
    <div class="small_pic">
        <ul>
            <li style="alpha(opacity:100);opacity:1;"><img src="../Image/effectImages/Ps123Net_0006.jpg" alt=""/></li>
            <li><img src="../Image/effectImages/Ps123Net_0007.jpg" alt=""/></li>
            <li><img src="../Image/effectImages/Ps123Net_0008.jpg" alt=""/></li>
            <li><img src="../Image/effectImages/Ps123Net_0009.jpg" alt=""/></li>
            <li><img src="../Image/effectImages/Ps123Net_0010.jpg" alt=""/></li>
            <li><img src="../Image/effectImages/Ps123Net_0011.jpg" alt=""/></li>
            <li><img src="../Image/effectImages/Ps123Net_0012.jpg" alt=""/></li>
            <li><img src="../Image/effectImages/Ps123Net_0013.jpg" alt=""/></li>
            <li><img src="../Image/effectImages/Ps123Net_0014.jpg" alt=""/></li>
        </ul>
    </div>

</div>

body{background-color: #c0c0c0;}
        ul{list-style-type: none;padding: 0;margin: 0;}
        .play{width: 1000px;height:600px;margin: 50px auto;position: relative;background-color: #ffffff;}
        .mark_left{width:300px;height:378px;position:absolute;left:0;top:0;background-color: red;filter:alpha(opacity:0);opacity:0;z-index:3000;}
        .mark_right{width:300px;height:378px;position:absolute;left:300px;top:0;background-color: yellow;filter:alpha(opacity:0);opacity:0;z-index:3000;}
        .big_pic .prev{width:69px;height:69px;background:url(../Image/effectImages/icon.jpg) no-repeat -340px -106px;position:absolute;left:50px;top:160px;z-index: 3001;filter:alpha(opacity:0);opacity:0;cursor:pointer;border-radius:50%;}
        .big_pic .next{width:69px;height:69px;background:url(../Image/effectImages/icon.jpg) no-repeat -340px -197px;position:absolute;right:50px;top:160px;z-index: 3001;filter:alpha(opacity:0);opacity:0;cursor:pointer;border-radius:50%;}
        .big_pic {width: 600px;height:378px;margin: 0 auto;overflow:hidden;position:relative;  left: 0;top: 30px;}
        .big_pic li{width:600px;height: 378px;position: absolute;left: 0;top: 0;overflow: hidden}
        .big_pic li img{width: 600px;height: 378px;}
        .small_pic{margin:0 auto;width:580px;height:90px;overflow:hidden;padding: 10px;position: relative;left:0;top:30px;background-color:#666666;}
        .small_pic ul{list-style-type:none;height: 90px;position: absolute;left: 0;top:0;padding: 10px 0 ;}
        .small_pic li{width: 137px;height: 90px;float:left;padding-left:10px;alpha(opacity:60);opacity:0.6;}
        .small_pic li img{width: 137px;height:90px;cursor: pointer;}

window.onload = function(){
        var oDiv = document.getElementById('playImages');
        var obtnPrve = getByClass(oDiv,'prev')[0];
        var obtnNext = getByClass(oDiv,'next')[0];
        var oMarkLeft = getByClass(oDiv,'mark_left')[0];
        var oMarkRight = getByClass(oDiv,'mark_right')[0];
        //1.先解决鼠标移动到左右部分显示箭头的步骤
        obtnPrve.onmouseover = oMarkLeft.onmouseover = function(){
            startMove(obtnPrve,'opacity',100)
        };
        obtnPrve.onmouseout = oMarkLeft.onmouseout = function(){
            startMove(obtnPrve,'opacity',0)
        };
        obtnNext.onmouseover = oMarkRight.onmouseover = function(){
            startMove(obtnNext,'opacity',100)
        };
        obtnNext.onmouseout = oMarkRight.onmouseout = function(){
            startMove(obtnNext,'opacity',0)
        };
        //大图切换
        var oDivSmall = getByClass(oDiv,'small_pic')[0];
        var oUlSmall = oDivSmall.getElementsByTagName('ul')[0];
        var oLiSmall = oDivSmall.getElementsByTagName('li');

        var oUlBig = getByClass(oDiv,'big_pic')[0];
        var oLiBig = oUlBig.getElementsByTagName('li');

        var nowZIndex = 2;
        var now = 0;
        oUlSmall.style.width = oLiSmall.length * oLiSmall[0].offsetWidth + 'px';
        for(var j=0;j<oLiSmall.length;j++){
            oLiSmall[j].index = j;

            oLiSmall[j].onclick = function(){
                if(this.index == now) return;
                now = this.index;
                tab();

            };
            oLiSmall[j].onmouseover = function(){
                startMove(this,'opacity',100)
            };
            oLiSmall[j].onmouseout = function(){
                if(this.index != now){
                    startMove(this,'opacity',60)
                }
            }

        }
        function tab(){
            oLiBig[now].style.zIndex = nowZIndex++;
            for(var i=0;i<oLiSmall.length;i++){
                startMove(oLiSmall[i],'opacity',60)
            }
            startMove(oLiSmall[now],'opacity',100);
            oLiBig[now].style.height = 0;
            startMove(oLiBig[now],'height',378);
            if(now == 0){
                startMove(oUlSmall,'left',0)
            }else if(now == oLiSmall.length-2){
                startMove(oUlSmall,'left',-(now - 2)*oLiSmall[0].offsetWidth)
            }
            else if(now == oLiSmall.length-1){
                startMove(oUlSmall,'left',-(now - 3)*oLiSmall[0].offsetWidth);
            }else{
                startMove(oUlSmall,'left',-(now-1)*oLiSmall[0].offsetWidth);
            }
        }


        obtnPrve.onclick = function(){
            now --;
            if(now == -1){
                now = oLiSmall.length - 1;
            }
            tab();
        };
        obtnNext.onclick = function(){
            now ++;
            if(now == oLiSmall.length){
                now = 0;
            }
            tab();
        }
        var timer = setInterval(obtnNext.onclick,2000);
        oDiv.onmouseover = function(){
            clearInterval(timer)
        }
        oDiv.onmouseout = function(){
            timer = setInterval(obtnNext.onclick,2000);
        }
    };
    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;
    }

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.opacity = (cur + speed)/100;
            }else{
                obj.style[attr] =cur + speed +'px';
            }
        }
    },30)
}
//getStyle 帮助获取不在行间的样式
function getStyle(obj,name){
    if(obj.currentStyle){
        return obj.currentStyle;
    }else{
        return getComputedStyle(obj,false)[name]
    }
}

有什么问题可以随时留言哦！