立体视觉轮播图_立体轮播图csdn-CSDN博客

本文链接：https://blog.csdn.net/mumu42/article/details/77575324

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
img{
display: block;
width: 100%;
height: 100%;
}
.wrap{
width: 1200px;
margin: 10px auto;
}
li{
position: absolute;
left: 200px;
top: 0;
}
.slider{
height: 500px;
position: relative;
}
.prev,.next{
width: 76px;
height: 112px;
position: absolute;
top: 50%;
margin-top: -56px;
background: url('img/rotate/next_1.png') no-repeat center center;
z-index: 99;
}
.prev{
left: 0;
background: url('img/rotate/prev_1.png') no-repeat center center;
}
.next{
right: 0;
}
.arrow{
opacity: 1;
}

</style>
</head>
<body>
<div class="wrap">
<div class="slider">
<ul>
<li><img src="img/rotate/slidepic1.jpg" /></li>
<li><img src="img/rotate/slidepic2.jpg" /></li>
<li><img src="img/rotate/slidepic3.jpg" /></li>
<li><img src="img/rotate/slidepic4.jpg" /></li>
<li><img src="img/rotate/slidepic5.jpg" /></li>
</ul>
<div class="arrow">
<div class="prev" id="prev"></div>
<div class="next" id='next'></div>
</div>
</div>
</div>
<script>
var json = [//定义数组，每个数组有计算好的键值对。并且将里面的值作为动画的目标值
{ // 0
"width":400,
"top":70,
"left":50,
"opacity":0.2,
"zIndex":2
},
{ // 1
"width":600,
"top":120,
"left":0,
"opacity":0.8,
"zIndex":3
},
{ // 2
"width":800,
"top":100,
"left":200,
"opacity":1,
"zIndex":4
},
{ // 3
"width":600,
"top":120,
"left":600,
"opacity":0.8,
"zIndex":3
},
{ //4
"width":400,
"top":70,
"left":750,
"opacity":0.2,
"zIndex":2
}
];
var ul=document.getElementsByTagName('ul')[0];//获取需要用的标签
var per=document.getElementById('prev');
var next=document.getElementById('next');
var lis=ul.children;

function animation(obj,json,fn){//封装缓动功能函数
clearInterval(obj.timer);//为避免多个定时器同时运行带来的bug，在用定时器之前先清理定时器
obj.timer=setInterval(function(){//定义定时器
var flag=1;//所有属性达到目标值的标志
for (var key in json) {//遍历json值
var target=json[key];//获取json里的目标值
var current=parseInt(getStyle(obj,key));//获取元素的当前值

if(key=="opacity"){//当属性为opacity值，重新获取值，因为opacity的值与普通的值不同
current=getStyle(obj,'opacity');
target*=100;
target=Math.round(target);
current*=100;
}
var speed=(target-current)/10;///获取运动加速度
speed=speed>0?Math.ceil(speed):Math.floor(speed);//为确保能搞达到最终目标值，给speed取整
obj.style[key]=current+speed+"px";//赋值给当前元素
if(key=="opacity"){//若当前属性为特殊值时，做特殊处理
obj.style[key]=(current+speed)/100;
}
if(key=="zIndex"){//若当前属性为特殊值时，做特殊处理
obj.style[key]=target;
}
if(target/100!=parseInt(getStyle(obj,key))){//没有达到目标值时，做一个标记
flag=0;
}
}
if(flag==1){//所有属性达到目标值时，清理定时器
clearInterval(obj.timer);
if(fn){//判断函数是否存在，若存在则执行
fn();
}
}
},30);
}
function getStyle(obj,attr){//封装获取元素属性函数（考虑兼容性）
return window.getComputedStyle?window.getComputedStyle(obj,null)[attr]:obj.currentStyle[attr];
}
function move(){
for(var i=0;i<lis.length;i++){
animation(lis[i],json[i]);//让每个图片达到目标值
}
}
move();
var count1=0;
//当发生点击事件时，改变图片的目标值，即图片的位置做相应的调整
per.οnclick=function(){
count1++;
if(count1==1){
var p=json.shift();
json.push(p);
move();
}
}
var count=0;

next.οnclick=function(){

count++;
if(count==1){
var p=json.pop();
json.unshift(p);
move();
}
}
setInterval(function(){
count=0;
count1=0;
},800);
</script>
</body>
</html>