这个纯 CSS 的幻灯切换效果里面有个 BUG？怎么解决？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 3709 天前的主题，其中的信息可能已经有所发展或是发生改变。

http://www.cssscript.com/demo/pure-css-content-slider-with-keyboard-navigation/
具体点完左右就知道了，左侧会累加，右侧则会减少，然后多于10张之后就完全变了，根本就点不着了。

有没有人明白我的意思？怎么解决？

累加

幻灯

多于

14 条回复 • 2014-10-24 13:55:33 +08:00

abelyao

2014-10-23 10:53:58 +08:00

应该是几个 label 之间的空隙造成的，这个 demo 做得比较简陋，就是提供了一个思路，自己重写应该可以实现，同时不会有这个问题

Hack38

2014-10-23 11:03:15 +08:00

@abelyao label之间不都用了100%表示了吗？这个要怎么计算才能精确？

abelyao

2014-10-23 11:08:57 +08:00

@Hack38 我看了一下它的代码，幻灯片的移动，采用的是 translate3d 属性，我觉得应该不需要用到这个，我也来做一个试试看，有意思

abelyao

2014-10-23 11:26:16 +08:00

@Hack38
话说这里 http://www.oschina.net/question/5189_34649 有个效果更赞的，你可以看一下…

Hack38

2014-10-23 11:35:42 +08:00

@abelyao 那个不好，我要全屏的。我发的那个要不是有那种小BUG，我就心满意足了。代码少，简洁。

abelyao

2014-10-23 11:49:23 +08:00

@Hack38 那我也来“借鉴”一下做个全屏的，不知道你有要求全屏

abelyao

2014-10-23 13:23:44 +08:00

@Hack38
我直接用它的代码测试了一下，其实就是 label 之间有空格（换行）导致的，你试试不要换行，每个 label 标签都连在一起，就不会了

Hack38

2014-10-23 13:33:49 +08:00

@abelyao
你是如何发现的？
<label for="slide1">Slide 1</label><label for="slide2">Slide 2</label><label for="slide3">Slide 3</label><label for="slide4">Slide 4</label>

这玩意儿害我不浅啊！

emric

2014-10-23 13:38:36 +08:00

inline-block 的关系中间的空格和制表符会产生间隙.

abelyao

2014-10-23 14:23:30 +08:00

@Hack38 @emric
#9 的朋友说对了，是 inline-block 的问题，但是去掉 inline-block 则问题更大 -.-
按照它这个思路重写一个吧

crs0910

2014-10-23 17:17:21 +08:00

外层font-size:0;里层font-size恢复正常

acthtml

2014-10-23 17:22:24 +08:00

这个幻灯想法很独特啊，赞一个。

Execution

2014-10-23 17:26:45 +08:00

链接挂了，我这边打不开。

pcar

2014-10-24 13:55:33 +08:00

思路不错，用的for属性。但是这样语义化就不好了。