旋转木马轮播图实现-优快云博客

我出错的地方是if(this.className == “prev”){ //注意这里是== 不是=

html部分

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>旋转木马轮播图</title>
    <link rel="stylesheet" href="xz-css.css"/>
</head>
<body>
<div class="wrap" id="wrap">
    <div class="slide" id="slide">
        <ul>
            <li><a href="#"><img src="images/xz1.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/xz2.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/xz3.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/xz4.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/xz5.jpg" alt=""/></a></li>
        </ul>
        <div class="arrow" id="arrow">
            <a href="javascript:;" class="prev"></a>
            <a href="javascript:;" class="next"></a>
        </div>
    </div>
</div>
</body>
</html>
<script src="animate.js"></script>
<script>
    var wrap = document.getElementById("wrap");//大盒子
    var arrow = document.getElementById("arrow");//三角
    var slide = document.getElementById("slide");
    var lis = document.getElementsByTagName("li");//所有要操作的盒子
    wrap.onmouseover = function () {//鼠标经过显示和隐藏 左右两个箭头
        animate(arrow,{'opacity':100});
    }
    wrap.onmouseout = function () {
        animate(arrow,{'opacity':0});
    }
    //存储了每个图片的信息
    var json =[
        {//1
            width:400,
            top:20,
            left:50,
            opacity:20,
            z:2
        },
        {//2
            width:600,
            top:70,
            left:0,
            opacity:80,
            z:3
        },
        {//3
            width:800,
            top:100,
            left:200,
            opacity:100,
            z:4
        },
        {//4
            width:600,
            top:70,
            left:600,
            opacity:80,
            z:3
        },
        {//5
            width:400,
            top:20,
            left:400,
            opacity:20,
            z:2
        }
    ];
    //函数节流
    var jieliu = true; //用来控制函数节流的变量
    //两个按钮点击事件
    var as = arrow.children;
    change();
    for(var k in as){
        as[k].onclick = function () {
            if(this.className == "prev"){    //注意   这里是==  不是=
                // alert("左侧"); 移除第一个 放到json最后一个
                if(jieliu == true ){
                    change(false);
                    jieliu = false;//点击完之后，立刻取反
                }
            }else{
                // alert("右侧"); 把最后一个json删除，并把最后一个添加到json第一个位置
                if(jieliu == true){
                    change(true);
                    jieliu = false;
                }
            }
        }
    }
    function change(flag){
        if(flag){
            //右侧 把最后一个json删除，并把最后一个添加到json第一个位置
            json.unshift(json.pop());
        }else{
            //左侧 移除第一个 放到json最后一个
            json.push(json.shift());
        }
        for(var i=0;i<json.length;i++){
            animate(lis[i],{
                width:json[i].width,
                top:json[i].top,
                left:json[i].left,
                opacity:json[i].opacity,
                zIndex:json[i].z
            },function(){ jieliu = true; });
        }
    }
</script>

css部分

@charset "UTF-8";
/*初始化 reset*/
blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,ul,li,ol,p,pre,td,textarea,th{margin: 0;padding: 0;}
ul,ok{list-style: none;}
a{text-decoration: none;}
fieldset,img{border: 0;vertical-align: top;}
a,input,button,select,textarea{outline: none;}
a,button{cursor: pointer;}

.wrap{
    width: 1200px;
    margin: 100px auto;
    border:1px solid red;
}
.slide{
    height: 500px;
    position: relative;
}
.slide li{
    position: absolute;
    left: 200px;
    top: 0;
}
.slide li img{
    width: 100%;
}
.arrow {
    opacity: 100;
}
.prev,.next{
    width: 76px;
    height: 112px;
    position: absolute;
    top: 50%;
    margin-top: -56px;
    background: url("images/prev.png") no-repeat;
    z-index: 99;
}
.next{
    right: 0;
    background: url("images/next.png") no-repeat;
}

js部分

/**
 * Created by Administrator on 2016-10-21.
 */
//多属性运动框架
function animate(obj,json,fn){
    clearInterval(obj.timer);
    obj.timer = setInterval(function(){
        var flag = true; //用来判断是否停止定时器 一定要写在遍历外面
        for(var attr in json){
            var current = 0;
            if(attr == "opacity"){
                current = Math.round(parseInt(getStyle(obj,attr)*100)) || 0;
            }else{
                current = parseInt(getStyle(obj,attr));
            }
            //var current =parseInt(getStyle(obj,attr)); //数值
            var step = (json[attr] - current) /10;
            step = step>0 ? Math.ceil(step) : Math.floor(step);
            if(attr == "opacity"){ //判断用户有没有输入opacity
                if("opacity" in obj.style){ //判断浏览器是否支持opacity
                    //obj.style.opacity = json[attr];
                    obj.style.opacity = (current+step)/100;
                }else{
                    obj.style.filter = "alpha(opacity = "+(current+step)*10+")";
                }
            }else if(attr == "zIndex"){
                obj.style.zIndex = json[attr];
            }else{
                obj.style[attr] = current + step + "px";
            }
            if(current != json[attr]){ //只要目标与json中任意一个值不等 就不能停止定时器 这个一定写在定时器里面
                flag = false;
            }
        }
        if(flag){
            clearInterval(obj.timer);
            if(fn){fn();}
        }
    },30);
}
function getStyle(obj,attr){ //获取属性值
    if(obj.currentStyle){ //i3
        return obj.currentStyle[attr];
    }else{
        return window.getComputedStyle(obj,null)[attr]; //w3c
    }
}