原生JS实现 轮播效果

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

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]
    }
}

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