纯CSS构造的图片切换效果beta3解决思路

纯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做的，呵呵
[解决办法]
看看
[解决办法]
能做到自动切换就更好了。。。
[解决办法]
强人

[解决办法]
模型 游戏 新闻
[解决办法]
一顶！！！
[解决办法]
接分 学习
[解决办法]

探讨

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

[解决办法]
mark
[解决办法]
看了下，LZ果然很强大，最大的亮点就是点击之后居然还有背景色，我看了半天，被我找出了原因，原来是<span></span>固定位置达到的

实用性不强，不过学习了这种思想哈
[解决办法]
疯了，要下东西，没积分。老搞点
[解决办法]
这么这么牛！
[解决办法]
顶事必须的
[解决办法]
学习了
[解决办法]
留个标记
[解决办法]
支持一下
[解决办法]
我们喜欢看美女。。。

～～嘿嘿，话说，lz专门搞css的么？
[解决办法]
不错嘛
[解决办法]
忙顶....这么强悍滴.. 
值得学习.....
[解决办法]
还不错哦
[解决办法]
这也贴出来，
不过，说声，不错
[解决办法]
坚决鄙视楼猪！！！！！！！！
楼猪发的类似的贴子，我都看过N遍了！！！！！！

[解决办法]
楼主很好很强大.
[解决办法]
小定一下
[解决办法]
这个不错。
[解决办法]
强人
[解决办法]
刚　刚　地　！
[解决办法]
不过不能自动切换不太好
[解决办法]
学习了，楼主总是有这么多杰作啊！
[解决办法]
顶
[解决办法]
MARK
[解决办法]
MARK
[解决办法]
收藏
[解决办法]
好东东，如果能把点击变成鼠标移到数字上，可以切换图片就更好了...
[解决办法]
JF
[解决办法]
正好拿来学习。
[解决办法]
GOOD
[解决办法]
学习.
[解决办法]
楼主很牛
[解决办法]
如果能自动切换就好了。。。
[解决办法]



------解决方案--------------------

学习ing
[解决办法]
学习一下啊
[解决办法]
这个我也做了一个，使用js做的，呵呵
[解决办法]
强！！！
lz谢谢你啊
要知道我以前是不会做这个效果的，后来是用JavaScript来实践的
现在看来css也是可以实现的
真的谢谢啊！以后又好东东记得照顾哈咱这新人啊！！！
嘿嘿
谢谢
力顶！！！！！
[解决办法]
真强啊，这个必须要顶了

[解决办法]

引用楼主 storm0 的帖子:

转载请注明出处，css探索之旅-飘零雾雨的庄园

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

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

[解决办法]
jf～～
[解决办法]
小白，学习中！谢谢！
[解决办法]
我顶啊
[解决办法]
顶
[解决办法]
丿
[解决办法]
学习一下啊
[解决办法]
看了半天,不太明白意思,这个也不是纯CSS啊,很明显,使用 JS++Dom模型+CSS 实现的,这是很简单的东西啊!出去做事必备的技能吧!
而且楼主的代码有点故弄玄虚!为什么搞那么复杂,能简单就简单,功能一样,为什么不选择简单的!
=_=?
[解决办法]
顶
[解决办法]
果然厉害
顶一下
[解决办法]
厉害!支持楼主！学习一下！
[解决办法]

HTML code

#dyimgview .bd ul{    position:relative;    overflow:hidden;    height:180px;    padding:0 10px;    list-style:none;}
[解决办法]
纯CSS做的，不错。
[解决办法]
楼主很牛呀！
[解决办法]
路过，好帖顶起来
[解决办法]
楼主好强大，收藏起来，谢谢啦
[解决办法]
学习
[解决办法]
顶顶~~~学习了~~
[解决办法]
好像opera下不好使 

 

查看更多 下一篇