为了账号安全，请及时绑定邮箱和手机立即绑定
首页 免费课 JS+CSS3实现带预览图幻灯片效果 问答

JS+CSS3实现带预览图幻灯片效果

Lyn Web前端工程师
查看讲师更多课程 Lyn讲师的其他课程
难度初级
时长 1小时33分
学习人数
综合评分9.50
114人评价 查看评价
9.8 内容实用
9.4 简洁易懂
9.3 逻辑清晰
全部 评论 问答 未解决 精华
qq_曲误_0
布局就是
<div class="silder">
<div class="main"></div>
<div class="ctrl">
<div class="ctrl-i"><img src=""></div>
<div>
</div>

因为把父级ctrl-i已经定位了、所以图片是按照ctrl-i定位的。如果bottom为0的话，就与灰块底部重叠，所以-13才刚刚好
0 2-2 下面编写倒影
2017-03-01
慕粉3837056
.replace(/{{css}}/g,['','main-i_right][i%2]);
生成数组下标取值。
好技巧，学习了。
2 3-3 优化与扩展
2017-02-28
qq_慕斯_2
思路很清晰
0 1-2 开发方法
2017-02-23
奋斗的大猫
求一份源码 跟着敲错的离谱啊！
1 2-2 下面编写倒影
2017-02-19
田鸡egf
经验不够的就真的学着就懵逼了。
2 3-3 优化与扩展
2017-02-19
我是刘高兴
demo地址：https://lusg02.github.io/Exercises/slide/index.html

源码已在上面列出~
2
2017-02-15
我是刘高兴
非常感谢老师，这个思想对于自学太有帮助了！咱们这种野生程序员看了一堆网上培训机构的教程，基本都是onloadXXXX之类的。整理了下源码放到了Github上，需要的可下载~ https://github.com/lusg02/Exercises/tree/master/slide
3
2017-02-15
奋斗的大猫
很不错！思路清晰，值得学习。
0 1-2 开发方法
2017-02-15
蒙奇奇3
终于完成了，需要源代码或者有问题的可以加QQ934630855，大家一起探讨
1 3-4 总结
2017-02-14
_掉毛的皮卡丘_
就是高级轮播图嘛。。。。
1 1-1 案例介绍
2017-02-11
qq_ionicRoyKent_04116743
数据绑定用angularjs就不麻烦了
1 3-1 输出以及切换
2017-01-15
lsh1991
好吧，我错了。打错了个字母，才出现报错- -。看了老半天才发现。
0 3-1 输出以及切换
2016-12-31
lsh1991
ctrl.className+=' ctrl-i_active'; 效果能实现，但是会报错。
改成 this.className+=' ctrl-i_active'; 就不会了。
0 3-1 输出以及切换
2016-12-30
刺桐小孩4289090
图片文件要存在在哪儿，才能读取得到的
0 2-1 距离底部有点距离
2016-12-23
设计师小站
老师讲解的很详细，基础内容大家就自行百度和google了，现在贴出html css js源代码，使用lint语法优化了一下，仅供参考，链接: http://pan.baidu.com/s/1kVSBOij 密码: v37k
0
2016-12-22
首页上一页45678910下一页尾页
开始学习
课程须知
1、已经了解html标签的用法，图片资源的引用 2、已经了解css选择符的概念，以及基本的样式属性作用（宽、高……） 3、已经了解JavaScript函数的调用，了解 DOM 元素的获取及其属性的读写 4、已经掌握变量，流程控制（条件，循环）
老师告诉你能学到什么？
1、方法论：VCD 分解法，教你破解任意特效案例的实现原理 2、CSS3 特效：倒影实现、样式过度动画 3、简单的前端模板功能 4、JS通用函数：简单的 id,class DOM 选择器实现 5、脚本操作元素的属性和样式

微信扫码，参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示：

您好，此课程属于迁移课程，您已购买该课程，无需重复购买，感谢您对慕课网的支持！

查看已购买的课程

本次提问将花费2个积分

你的积分不足，无法发表

为什么扣积分？
确认 取消

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分？
确认 取消

举报

0/150
提交
取消