Jquery 动态实现3D轮播效果 （简版）
先看一下效果图
内网通截图20190627074351.png
我使用的是animate 自定义动画效果实现
首先定义一个结构
<body>
<div class="box">
<ul>
<li><img src="[img/3.jpg](img/3.jpg)" ></li>
<li><img src="[img/4.jpg](img/4.jpg)" ></li>
<li><img src="[img/5.jpg](img/5.jpg)" ></li>
<li><img src="[img/6.jpg](img/6.jpg)" ></li>
<li><img src="[img/8%20(2).jpg](img/8%20(2).jpg)" ></li>
</ul>
</div>
</body>
简单布一下css属性
最重要的一点就是定位
···css
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul{
display: flex;
list-style: none;
}
img{
width: 100%;
height: 100%;
}
li:nth-of-type(1){
width: 700px;
height: 300px;
}
li:nth-of-type(5),
li:nth-of-type(2){
width: 350px;
height: 150px;
}
li:nth-of-type(3),
li:nth-of-type(4){
width: 175px;
height: 75px;
}
li:nth-of-type(1){
position: absolute;
top: 150px;
left: 400px;
z-index: 3;
border: 1px solid;
}
li:nth-of-type(2){
position: absolute;
top: 220px;
left: 925px;
z-index: 2;
border: 1px solid;
}
li:nth-of-type(5){
position: absolute;
top: 220px;
left: 210px;
z-index: 2;
border: 1px solid;
}
li:nth-of-type(4){
position: absolute;
top: 255px;
left: 110px;
border: 1px solid;
}
li:nth-of-type(3){
position: absolute;
top: 255px;
left: 1190px;
}
</style>
···
接下载就是最重要的jq实现效果了
没想到吧 js的代码这么少 😀😀😀
- 原理就是我把属性以对象的形式放进一个数组里
- 然后就是设定一个定时器
- 第三步获取元素 遍历该dom
- 以自定义动画的方式把数组里的其中一个对象
animate动画可以接收一个对象形式的属性所以咱们直接传入一个对象- 然后执行过后让该数组末尾添加 该数组头部第一个对象
7 知识点 arr.push 末尾添加 返回新的长度 arr.shift 返回数组中删除掉的元素arr.push(arr.shift) 就是把删除掉的第一个元素 添加到末尾，- 已达到轮播的效果 效果比较简略
$(function(){
var arr=[{width:"350px",height:"150px","z-index":2,top:"220px",left:"925px"},
{width:"175px",height:"75px","z-index":0,top:"255px",left:"1190px"},
{width:"175px",height:"75px","z-index":0,top:"255px",left:"110px"},
{width:"350px",height:"150px","z-index":2,top:"220px",left:"210px"},
{width:"700px",height:"300px","z-index":3,top:"150px",left:"400px"}]
setInterval(function(){
$("li").each(function(i,li){
$(li).animate(arr[i])
})
arr.push(arr.shift());
},3000)
})
