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

This topic created in 4244 days ago, the information mentioned may be changed or developed.

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

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

累加

幻灯

多于

14 replies • 2014-10-24 13:55:33 +08:00

abelyao

Oct 23, 2014

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

Hack38

Oct 23, 2014

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

abelyao

Oct 23, 2014

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

abelyao

Oct 23, 2014

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

Hack38

Oct 23, 2014

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

abelyao

Oct 23, 2014

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

abelyao

Oct 23, 2014

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

Hack38

Oct 23, 2014

@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

Oct 23, 2014

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

abelyao

Oct 23, 2014

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

catoncat

Oct 23, 2014

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

acthtml

Oct 23, 2014

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

Execution

Oct 23, 2014

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

pcar

Oct 24, 2014

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