2019-06-27 @于志程

Jquery 动态实现3D轮播效果 （简版）

先看一下效果图

内网通截图20190627074351.png

我使用的是animate 自定义动画效果实现

首先定义一个结构

简单布一下css属性

最重要的一点就是定位

···css

···

接下载就是最重要的jq实现效果了

---

没想到吧 js的代码这么少

1. 原理就是我把属性以对象的形式放进一个数组里
2. 然后就是设定一个定时器
3. 第三步获取元素 遍历该dom
4. 以自定义动画的方式把数组里的其中一个对象

5. animate动画可以接收一个对象形式的属性所以咱们直接传入一个对象
   

6. 然后执行过后让该数组末尾添加 该数组头部第一个对象
   7 知识点 arr.push 末尾添加 返回新的长度

7. arr.shift  返回数组中删除掉的元素 
   

8. arr.push(arr.shift) 就是把删除掉的第一个元素  添加到末尾，
   

9. 已达到轮播的效果 效果比较简略

        $(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)
        })

@一片写的非常不错的文章

@ 以面向对象的方式 封装一个 移动端轮播效果

@ 完美实现各项功能以及注释都特别的全

@喜欢的朋友可以关注一下

https://www.jianshu.com/p/1ea4a4ea94b0