JS+CSS3实现带预览图幻灯片效果_技术问答

首页免费课 JS+CSS3实现带预览图幻灯片效果问答

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

                
                Lyn
            Web前端工程师

                    查看讲师更多课程 
                    Lyn讲师的其他课程
                
JS+CSS3实现“粽情端午”
中级·39504
免费课程
                                
CSS3+JS 实现超炫的散列画廊特效
中级·46090
免费课程
                                
可调大小面板实现（Resizeable Panel）
初级·13047
免费课程
                                
QQ空间时光轴特效
初级·29058
免费课程
                                
鼠标拖拽效果
初级·25993
免费课程
                                
                难度初级
            
                时长 1小时33分
            
                学习人数
            
综合评分9.50
                            114人评价
                        查看评价
                                9.8
                                内容实用
                            
                                9.4
                                简洁易懂
                            
                                9.3
                                逻辑清晰

全部评论问答未解决精华

为什么ctrl-i里面的东西有边距..没写过边距啊

最新回答 / 慕沐2622025

换行有空格

2 回答 743 浏览 2-3 基本界面样式完成

2017-03-09

效果出来不一样，那个缩略图没有在预期的位置0.0

最新回答 / qq_慕盖茨8361330

看到这里解决我的问题了我也是跟着代码敲最后图片加了position 直接定位爆炸我想问下不给a 也就是ctrl-i设置定位那么他的最近的父元素不是ctrl么怎么定位会定到上面去嘞 ctrl也有position属性啊虽然是absolute

3 回答 995 浏览 2-1 距离底部有点距离

2017-03-09

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

源码已在上面列出~

2017-02-15

我是刘高兴

非常感谢老师，这个思想对于自学太有帮助了！咱们这种野生程序员看了一堆网上培训机构的教程，基本都是onloadXXXX之类的。整理了下源码放到了Github上，需要的可下载~ https://github.com/lusg02/Exercises/tree/master/slide

2017-02-15

奋斗的大猫

很不错！思路清晰，值得学习。

0 1-2 开发方法

2017-02-15

自动播放如何实现

最新回答 / 慕九州9535070

这其实不难啊,您只需要写一个变量记录轮播图的页数,然后用周期函数执行一次判断一次就可以了

1 回答 1255 浏览 3-4 总结

2017-02-14

蒙奇奇3

终于完成了，需要源代码或者有问题的可以加QQ934630855，大家一起探讨

1 3-4 总结

2017-02-14

谷歌浏览器下的clientHeight？

最新回答 / qq_Nightwish_8

怎么解决的

2 回答 1171 浏览 3-2 动态调整图片高度

2017-02-14

_掉毛的皮卡丘_

就是高级轮播图嘛。。。。

1 1-1 案例介绍

2017-02-11

.slider .main .main-i .caption h2{ font-size: 30px; color: #999; line-height: 30px; text-align: right;}.slider .main .main-i .caption h3{ font-size: 40px; color: #333; line-height: 40px; text-align: right; font-family: "楷体";}.slider .main .main-i h2{ m...

1 回答 1354 浏览 3-3 优化与扩展

2017-02-08