JS实现“旋转木马”幻灯片效果_技术问答

首页免费课 JS实现“旋转木马”幻灯片效果问答

JS实现“旋转木马”幻灯片效果

                
                一只帅蚂蚁
            Web前端工程师

                    查看讲师更多课程 
                    一只帅蚂蚁讲师的其他课程
                
JS插件开发之-Tab选项卡
中级·19829
免费课程
                                
移动端Web组件-Dialog对话框
中级·25976
免费课程
                                
JS插件开发之LightBox图片画廊(下)
中级·15081
免费课程
                                
JS插件开发之LightBox图片画廊(上)
中级·27074
免费课程
                                
                难度中级
            
                时长 2小时50分
            
                学习人数
            
综合评分9.63
                            70人评价
                        查看评价
                                9.9
                                内容实用
                            
                                9.3
                                简洁易懂
                            
                                9.7
                                逻辑清晰

全部评论问答未解决精华

锦衣无涯

animate()是过渡执行的函数，需要延迟后才将CSS属性设置上去，而each函数早在这段延迟还未来结束的时间里，就已经为所有的照片完成了zIndex的设置，所以导致所有图片的zIndex的值瞬间相同。
老师的办法是先将所有的图片的zIndex的值以数组的形式储存起来。在完成过渡效果的瞬间为每个图片添加上数组中储存的zIndex

1 2-11 右旋转所有帧

2018-05-18

锦衣无涯

点击按钮执行循环函数函数循环9次分别做了以下两件事情
1条件检查，为第一个LI，直接获取最后一个LI的位置属性进行过渡变幻
2条件检查，不是第一个LI，直接获取排列在它前面的LI的位置属性进行过渡变幻
DOM结构并未发生改变，无限循环。

0 2-10 左旋转所有帧

2018-05-17

锦衣无涯

left的位置其实不用讲的这么麻烦，左侧右侧的图片排列无非就是依据gap这个空隙罢了

0 2-7 右边帧的位置关系设置（2）

2018-05-16

锦衣无涯

老师的思路很棒？我只能说很奇葩，明明左边的排列可以不用那么复杂，非得把右边的最后一张拿过来倒着排列，真是无语。而且这门课对图片的布局需要很明确的，第一堂课应该是把整个布局一些特别注意的地方点出来，不然过来看的新手绝对云里雾里

0 2-8 左边帧的散列关系

2018-05-16

锦衣无涯

所谓构造函数不过是人们意淫的一个概念，选择首字母大写进行区分，本质上它就是个函数。
而原型上的方法，又不过就像是写在构造函数里的方法一样，在原型上写好的方法，都是要放在构造函数里等待启动的，当我们使用NEW去创建实例时，也就启动了原型上的方法。
这里面是一种思想而不是去盲目的记住原型写方法属性写在类凭什么方法就不能写在类里？视情景而定，不要死记

0 2-4 设置基本参数值

2018-05-14

流觞醉月

完结撒花，感谢慕课网，感谢老师，感谢幕友

0 3-4 课程总结

2018-05-14

流觞醉月

学的是面向对象的编程思路，把这种思路掌握了理解透了以后自己写也能写出个大概了。

0 2-11 右旋转所有帧

2018-05-14

流觞醉月

说错，self.prev()应该是所选self元素的前一个元素，当self为$("li")时才是获取除最后一个li元素之前的所有同胞元素。

0 2-10 左旋转所有帧

2018-05-14

流觞醉月

self.prev()：此处self为当前选中的<li>元素。括号内为空时，获取除最后一个li元素之前的所有同胞元素。.get(0)，获取第一个<li>元素，如果第一个元素不存在（也只有self为第一个li元素的时候才会不存在）时，把前一个li设置为最后一个li。否则正常获取为前一个。

0 2-10 左旋转所有帧

2018-05-14

流觞醉月

rLevel = lLevel = Math.floor(this.posterItems.length/2),
rWidth = lWidth = this.setting.posterWidth,
rHeight = lHeight = this.setting.posterHeight；
然后遍历设置左右两边图片的时候就不用搞那么复杂了

0 2-8 左边帧的散列关系

2018-05-14

流觞醉月

左右按钮不必依次设置，只设置他们的共同class----.btn即可

0 2-5 按钮和第一帧层级关系设置

2018-05-14

流觞醉月

window["Carousel"] = Carousel;
可以写成window.Carousel = Carousel;
老师这种写法还没见过，还可以这样写？

0 2-1 基本JS、JQ开发结构搭建

2018-05-13

三都赋

谢谢老师，讲的非常好！

0 3-4 课程总结

2018-04-24

TBM_

这个人说话让我觉得好难受啊，呼吸不过来！

0 1-1 传统的幻灯片分析和旋转木马效果演示

2018-03-26

许愿瓶啊

完结撒花！

0 3-4 课程总结

2018-03-16

首页上一页 1 2 3 4 5 6 7 下一页尾页

开始学习

课程须知: 1、HTML 和 CSS 基础知识 2、JS 实现类、对象的方法

老师告诉你能学到什么？: 1、CSS的定位，DOM结构，层级关系的应用 2、基本的类的封装过程 3、如何配置合理的参数控制 4、JQ的对象获取，操作，事件绑定 5、数组的分解 6、位置关系设置，旋转机制

微信扫码，参与3人拼团

热搜

最近搜索清空

JS实现“旋转木马”幻灯片效果