纯CSS构造的图片切换效果beta3
转载请注明出处，css探索之旅-飘零雾雨的庄园

　　对于图片切换效果相信大家都早已不陌生了，在各大网站这样的效果都是司空见惯的。好早前就写过一个纯CSS的相册图片展示(书签应用)，不过在那篇文章里还遗留有几个问题没有解决，在之后就一直没有时间去弄，时间一长就懒得去搞了。

　　今天在翻以前的文章看，偶然翻到这篇07年的文章，看到里面还有历史遗留问题没有解决。就打算继续进行改造完善，完成了纯CSS图片切换效果beta3。

　　之前的文章里主要还有2个问题未解决，一是：切换序号无法指定激活状态的样式，用户很难分别当前显示的哪一个区域的内容；二是：该效果不支持Opera。

　　beta3版主要是解决了切换序号无法指定激活状态的样式这个问题，至于对Opera的支持，仍然是个让人头痛的问题，暂时没有较好的解决方案，也许下个版本会搞掂，呵呵。

　　来，瞧瞧对beta3的效果演示：

　　效果演示：［纯CSS构造图片切换展示效果beta3版］

　　从该实例里可以看到，激活状态的序号的背景变成了黑色，区别于普通状态下的灰色。

　　解决该问题的主要思路是不给切换序号预设背景颜色，因为无法判断出哪个序号是当前的，不过被切换的内容区域一眼就能看出，在点击不同的序号时，是3张不同的照片和相应的文字描述在轮换。既然无法判断当前序号，而被切换的内容确可以得到的，那么可不可以在内容上做文章呢？答案是可以的 （这种解决方案07年时我在另外一个例子里曾经用到过，就是另类TabStrip效果(书签应用补遗) ）。现在就应用到这个例子中来。

　　就是给每个内容块加上背景并调整位置到对应的切换序号下，来充当序号的背景，这样就变通的解决了无法识别当前序号的问题。具体做法，详见实例代码。

　　历史版本：

　　　纯CSS构造图片切换展示效果beta1版

　　　纯CSS构造图片切换展示效果beta2版

　　　纯CSS构造图片切换展示效果beta3版

------解决方案--------------------
sf
------解决方案--------------------
BD
------解决方案--------------------
这个一定要顶～～～～！
------解决方案--------------------
点开看了下，实在是强大。
博客的内容也如此丰富，学习～～～～！
------解决方案--------------------
up up
------解决方案--------------------
这是 什么意思？
------解决方案--------------------
MARK
------解决方案--------------------
我 顶！
------解决方案--------------------
呵呵，有点意思~~支持！！
------解决方案--------------------
还好吧！！！
------解决方案--------------------
~jF
------解决方案--------------------
学习一下
------解决方案--------------------
忙顶....这么强悍滴..
值得学习.....
------解决方案--------------------
多谢，学习
------解决方案--------------------
可以
------解决方案--------------------
xuyao
------解决方案--------------------
可以看看！
------解决方案--------------------
值得学习.....
------解决方案--------------------
这个我也做了一个，使用js做的，呵呵
------解决方案--------------------
看看
------解决方案--------------------
能做到自动切换就更好了。。。
------解决方案--------------------
强人

------解决方案--------------------
模型 游戏 新闻
------解决方案--------------------
一顶！！！
------解决方案--------------------
接分 学习
------解决方案--------------------

引用:

能做到自动切换就更好了。。。

关注下，希望楼主继续加油
------解决方案--------------------