前端JS特效第38波：js图片层叠布局旋转木马特效_js 层叠图片多动前后对比-CSDN博客

本文链接：https://blog.csdn.net/wangtianming88/article/details/139906513

js图片层叠布局旋转木马特效，先来看看效果：

部分核心的代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>js图片层叠布局旋转木马特效 - php中文网</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;
/*opacity: .5;*/
/*filter: alpha(opacity=50);*/
}
.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="image/1.jpg" alt=""></a></li>
 <li><a href="#"><img src="image/2.jpg" alt=""></a></li>
 <li><a href="#"><img src="image/3.jpg" alt=""></a></li>
 <li><a href="#"><img src="image/5.jpg" alt=""></a></li>
 <li><a href="#"><img src="image/6.jpg" 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(){
// console.log('aaa')
animate(arraw, {opacity: 100});
});
box.addEventListener('mouseout', function(){
// console.log('aaa')
animate(arraw, {opacity: 0});
});

var next = document.querySelector('.next');
var prev = document.querySelector('.prev');
var timer = null;
var flag = true;
next.addEventListener('click', function(){
// alert('next');
// console.log(json);
// console.log('================')
clearInterval(timer);
if(flag == true){
move(true);
flag = false;
}
//console.log(json);
});
next.addEventListener('mouseleave', function(){

clearInterval(timer);
//alert('next')
run();
//console.log(json);

});
prev.addEventListener('click', function(){
clearInterval(timer);
// alert('prev')
if(flag == true){
move(false);
flag = false;
}
});
prev.addEventListener('mouseleave', function(){
// alert('prev')
// clearInterva(timer);
run();
});

move();
run();
function run(){
clearInterval(timer);
timer = setInterval(function(){
// console.log('run')
if(flag == true){
flag = false;
move(true);
}
// console.log(json)
},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;
	// console.log('sss')
	for(var k in json){
	 // var leader = parseInt(getStyle(obj, k));
	 var leader = 0;
	 if(k == 'opacity'){
	  leader = Math.round(getStyle(obj, k)*100) || 100;
	 }else {
	  // console.log(json[k]);
	  leader = parseInt(getStyle(obj, k)) || 0;
	 };
//         console.log(leader);
	 // json[k]是目标位置
	 var step = (json[k]-leader)/10;
	 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];
		 console.log(666);
	 }else{
	  obj.style[k] = leader + "px";
	 }
	 if(leader != json[k]){
	  stoped = false;
	  }
	 };
	 if(stoped){
		// console.log('stop')
		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>

<div style="text-align:center;margin:80px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>来源：<a href="http://php.cn/" target="_blank">php中文网</a></p>
</div>
</body>
</html>

全部代码：js图片层叠布局旋转木马特效