JS--图片展示旋转木马效果

<style>
*{
	padding: 0;
	margin: 0;
}
#banner{
	position: relative;
	margin: 200px 400px;
	height: 200px;
	width: 400px;
}
li{
	list-style: none;
	width: 400px;
	height: 200px;
	position: absolute;
}
#banner div{
	position: absolute;
	width: 100%;
	bottom: 40%;
	opacity: 0;
}
#banner div span{
	width: 40px;
	height: 40px;
	color: #fff;
	font-size: 30px;
	background-color: #000;
	opacity: 0.4;
	text-align: center;
	line-height: 40px;
	display: block;
	float: left;
	cursor: pointer;
}
#banner div #right{
	float: right;
}
</style>

<div id="banner">
	<ul>
		<li style="background-color: gold;"></li>
		<li style="background-color: plum;"></li>
		<li style="background-color: yellowgreen;"></li>
		<li style="background-color: skyblue;"></li>
		<li style="background-color: pink;"></li>
	</ul>
	<div><span id="left">&lt;</span><span id="right">&gt;</span></div>
</div>
<script>
function my$(id){
	return document.getElementById(id);
}

//获取li
var list = my$("banner").getElementsByTagName("li");
//获取左右焦点的父级元素div
var focus = my$("banner").children[1];

//每个li的位置属性
var config = [
	{"width": 200,"top":-50,"left":-60,"opacity":0.2,"zIndex":0},
	{"width": 300,"top":-20,"left":-100,"opacity":0.8,"zIndex":9},
	{"width": 400,"top":0,"left":0,"opacity":1,"zIndex":99},
	{"width": 300,"top":-20,"left":200,"opacity":0.8,"zIndex":9},
	{"width": 200,"top":-50,"left":260,"opacity":0.2,"zIndex":0},
];
var flag = true;//假设所有的动画都执行完毕了
function assign(){
	//----图片散开
	for(var i = 0; i < list.length; i++){
		animation(list[i],config[i],function(){
			flag = true;//所有动画执行完毕之后,再让flag为true.这样动画执行完之后,才能开始下一次动画
		});
	}
}
//设置每个li的初始属性
assign();

//点击右侧焦点事件
my$("right").onclick = function(){
	if(flag){//只有所有动画执行完毕之后,才会重新分配图片位置
		flag = false;//只要重新分配图片位置,就让flag为false
		config.push(config.shift());//数组.shift()--->删除数组的第一个元素,返回值为删除的元素;数组.push()--->在数组最后追加元素.所以这行代码是,把数组config中的第一个元素变为最后一个元素
		//重新分配图片位置
		assign();
	}
}
//点击左侧焦点事件
my$("left").onclick = function(){
	if(flag){
		flag = false;
		config.unshift(config.pop());
		//重新分配图片位置
		assign();
	}
	
}

//鼠标移入banner事件
my$("banner").onmouseover = function(){
	animation(focus,{"opacity": 1, "zIndex": 100});
}
//鼠标离开banner事件
my$("banner").onmouseout = function(){
	animation(focus,{"opacity": 0, "zIndex": 0});
}

//获取元素属性值的函数
function getStyle(element, attr){
	return window.getComputedStyle ? window.getComputedStyle(element,null)[attr] : element.currentStyle[attr] || 0;
}

//多个属性的动画函数
function animation(element, json, fn){
	//先清除定时器
	clearInterval(element.timeId);
	element.timeId = setInterval(function(){
		var flag = true;//默认,假设所有属性都到达目标值
		for(var key in json){
			//如果属性为透明度时
			if(key == "opacity"){
				//获取当前透明度值,并扩大100倍,因为透明度为小数,扩大100倍方便计算
				var current = getStyle(element, key) * 100;
				//获取透明度的目标值,扩大100倍
				var target = json[key] * 100;
				//设置每次改变的数值
				var step = (target - current)/10;
				//判断step是正数还是负数
				step = step > 0 ? Math.ceil(step) : Math.floor(step);
				//改变后元素当前值
				current += step;
				element.style[key] = current/100;
			}else if(key == "zIndex"){//属性名为层级时
				element.style[key] = target;
			}else{//其他普通情况
				var current = parseInt(getStyle(element, key));
				var target = json[key];
				var step = (target - current)/10;
				step = step > 0 ? Math.ceil(step) : Math.floor(step);
				current += step;
				element.style[key] = current + "px";
			}
			//只要有一个没到达目标值,就让flag的值为false
			if(current != target){
				flag = false;
			}
		}
		if(flag){
			clearInterval(element.timeId);
			if(fn){
				fn();
			}
		}
	},10);
}
</script>