旋转木马的实现代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>js图片层叠实现轮播图,旋转木马特效</title>
<style type="text/css" media="screen">
html, body { width: 100%;}
ul li {list-style: none;}
*{margin:0;padding:0;}
#box {width: 1200px;margin: 20px auto;}
.slide {height: 500px;position: relative;}
.slide ul {height: 100%;}
.slide li {position: absolute;left:200px;top:0;}
.slide li img{width: 100%;}
.arraw {opacity: 0;}
.arraw a {width: 70px;height: 110px;display: block;position: absolute;top: 50%;margin-top: -55px;z-index: 999;}
.next {background: url(image/right.png) no-repeat;
right: -10px;}
.prev {background: url(image/left.png) no-repeat;
left: -10px;}
</style>
</head>
<body>
<div id="box">
<div class="slide">
<ul>
<li><a href="#"><img src="图片的路径" alt=""></a></li>
<li><a href="#"><img src="图片的路径" alt=""></a></li>
<li><a href="#"><img src="图片的路径" alt=""></a></li>
<li><a href="#"><img src="图片的路径" alt=""></a></li>
<li><a href="#"><img src="图片的路径" alt=""></a></li>
</ul>
<div class="arraw">
<a href="javascript:;" class="next"></a>
<a href="javascript:;" class='prev'></a>
</div>
</div>
</div>
<script>
var box = document.querySelector('#box');
var slide = document.querySelector('.slide');
var arraw = document.querySelector('.arraw');
var lis = document.querySelectorAll('li');
var json = [ // 包含了5张图片里面所有的样式
{ // 1
width:400,
top:20,
left:100,
opacity:20,
z:2,
id:1
},
{ // 2
width:600,
top:70,
left:50,
opacity:60,
z:3,
id:2
},
{ // 3
width:800,
top:100,
left:200,
opacity:100,
z:4,
id:3
},
{ // 4
width:600,
top:70,
left:550,
opacity:60,
z:3,
id:4
},
{ //5
width:400,
top:20,
left:650,
opacity:20,
z:2,
id:5
}
];
box.addEventListener('mouseover', function(){
animate(arraw, {opacity: 100});//animate()自定义动画
});
box.addEventListener('mouseout', function(){
animate(arraw, {opacity: 0});
});
var next = document.querySelector('.next');
var prev = document.querySelector('.prev');
var timer = null;
var flag = true;
next.addEventListener('click', function(){
clearInterval(timer);
if(flag == true){
move(true);
flag = false;
}
});
next.addEventListener('mouseleave', function(){
clearInterval(timer);
run();
});
prev.addEventListener('click', function(){
clearInterval(timer);
if(flag == true){
move(false);
flag = false;
}
});
prev.addEventListener('mouseleave', function(){
run();
});
move();
run();
function run(){
clearInterval(timer);
timer = setInterval(function(){
if(flag == true){
flag = false;
move(true);
}
},500);
}
function move(x){
if(x != undefined){
if(x){
json.push(json.shift());
}else{
json.unshift(json.pop());
};
};
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(){flag = true;})
};
}
function animate(obj, json, callback){// 先停止定时器
clearInterval(obj.timers);
obj.timers = setInterval(function(){
var stoped = true;
for(var k in json){
var leader = 0;
if(k == 'opacity'){
leader = Math.round(getStyle(obj, k)*100) || 100;
}else {
leader = parseInt(getStyle(obj, k)) || 0;
};
var step = (json[k]-leader)/10; // json[k]是目标位置
step = step > 0? Math.ceil(step) : Math.floor(step);
leader = leader + step;
if(k == 'opacity'){
obj.style[k] = leader/100;
obj.style['filter'] = 'alpha(opacity='+ leader +')';
}else if(k == 'zIndex'){
obj.style['zIndex'] = json[k];
}else{
obj.style[k] = leader + "px";
}
if(leader != json[k]){
stoped = false;
}
};
if(stoped){
clearInterval(obj.timers);
callback && callback();
};
},50);
};
//获取属性值
function getStyle(obj, attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return window.getComputedStyle(obj, null)[attr];
};
};
</script>
</body>
</html>
适用浏览器:360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。
来源:http://sc.chinaz.com/ 站长素材