JS 轮播图2（旋转木马轮播图）

页面布局：

CSS样式：

@charset "UTF-8";
/*初始化  reset*/
blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0}
body,button,input,select,textarea{font:12px/1.5 "Microsoft YaHei", "微软雅黑", SimSun, "宋体", sans-serif;color: #666;}
ol,ul{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:10px auto;
}
.slide {
    height:500px;
    position: relative;
}
.slide li{
    position: absolute;
    left:200px;
    top:0;
}
.slide li img{
    width:100%;
}
.arrow{
    opacity: 0;
}
.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-image: url(../images/next.png);
}

切换图片原理：

JS代码：

window.onload = function(){
	
	//arr数组存放图片样式的JSON
	var arr = [
        {   //  1
            width:400,
            top:70,
            left:50,
            opacity:20,
            zIndex:2
        },
        {  // 2
            width:600,
            top:120,
            left:0,
            opacity:80,
            zIndex:3
        },
        {   // 3
            width:800,
            top:100,
            left:200,
            opacity:100,
            zIndex:4
        },
        {  // 4
            width:600,
            top:120,
            left:600,
            opacity:80,
            zIndex:3
        },
        {   //5
            width:400,
            top:70,
            left:750,
            opacity:20,
            zIndex:2
        }
    ];
	//获取元素
	var slide = document.getElementById("slide");
	var liArr = slide.getElementsByTagName("li");
	var arrow = slide.children[1];
	var btn = arrow.children;
	//创建一个flag变量，开闭原则，为了再点击按钮完成所有样式之后才可以继续点击
	var flag = true;
	
	//鼠标移入时左右按钮显示，离开隐藏
	slide.onmouseenter = function(){
		animate(arrow,{"opacity":100});
	};
	slide.onmouseleave = function(){
		animate(arrow,{"opacity":0});
	};
	
	//页面加载样式
/*	for(var i=0;i0?Math.ceil(step):Math.floor(step);
	            leader = leader + step;
	            //3.赋值
	            //特殊情况特殊赋值
	            if(k === "opacity"){
	                ele.style[k] = leader/100;
	                //兼容IE678
	                ele.style.filter = "alpha(opacity="+leader+")";
	                //如果是层级，一次行赋值成功，不需要缓动赋值
	                //为什么？需求！
	            }else if(k === "zIndex"){
	                ele.style.zIndex = json[k];
	            }else{
	                ele.style[k] = leader + "px";
	            }
	            //4.清除定时器
	            //判断: 目标值和当前值的差大于步长，就不能跳出循环
	            //不考虑小数的情况：目标位置和当前位置不相等，就不能清除清除定时器。
	            if(json[k] !== leader){
	                bool = false;
	            }
	        }
	
	        //console.log(1);
	        //只有所有的属性都到了指定位置，bool值才不会变成false；
	        if(bool){
	            clearInterval(ele.timer);
	            //所有程序执行完毕了，现在可以执行回调函数了
	            //只有传递了回调函数，才能执行
	            if(fn){
	                fn();
	            }
	        }
	    },25);
	};
};