Jquery 動(dòng)態(tài)實(shí)現(xiàn)3D輪播效果 （簡(jiǎn)版）
先看一下效果圖
內(nèi)網(wǎng)通截圖20190627074351.png
我使用的是animate 自定義動(dòng)畫效果實(shí)現(xiàn)
首先定義一個(gè)結(jié)構(gòu)
<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>
簡(jiǎn)單布一下css屬性
最重要的一點(diǎn)就是定位
···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實(shí)現(xiàn)效果了
沒想到吧 js的代碼這么少 ??????
- 原理就是我把屬性以對(duì)象的形式放進(jìn)一個(gè)數(shù)組里
- 然后就是設(shè)定一個(gè)定時(shí)器
- 第三步獲取元素 遍歷該dom
- 以自定義動(dòng)畫的方式把數(shù)組里的其中一個(gè)對(duì)象
animate動(dòng)畫可以接收一個(gè)對(duì)象形式的屬性所以咱們直接傳入一個(gè)對(duì)象- 然后執(zhí)行過后讓該數(shù)組末尾添加 該數(shù)組頭部第一個(gè)對(duì)象
7 知識(shí)點(diǎn) arr.push 末尾添加 返回新的長度 arr.shift 返回?cái)?shù)組中刪除掉的元素arr.push(arr.shift) 就是把刪除掉的第一個(gè)元素 添加到末尾苫拍，- 已達(dá)到輪播的效果 效果比較簡(jiǎn)略
$(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)
})
