纯CSS构造的图片切换效果beta3

飘零雾雨 2009-06-11 11:45:16

加精

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

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

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

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

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

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

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

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

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

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

　　历史版本：

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

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

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

...全文

4289 98 打赏收藏转发到动态举报

写回复

用AI写文章

98 条回复

切换为时间正序

请发表友善的回复…

发表回复

Markerpz 2012-10-30

打赏
举报

呵呵。锚点而已。这个方法出来好久啦。一点不实用

accpchenhao 2012-10-25

打赏
举报

点开看了下，实在是强大。

火龙 2012-10-23

打赏
举报

我擦，我找了好久在这里找到了！！！！

gudeng886 2012-08-07

打赏
举报

点开看了下，实在是强大。

问候你… 2012-08-06

打赏
举报

楼主你打的代码在哪里啊？是要查看源文件吗？

yy7054wyq5 2012-08-01

打赏
举报

从来没想过CSS还可以做这个。

QQ22456577 2012-02-18

打赏
举报

有点意思

cuihanfeng 2010-10-27

打赏
举报

楼主多发点儿好东西呀

拉风的人儿啊 2010-06-11

打赏
举报

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

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

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

版本是什么意思

tty100 2010-03-02

打赏
举报

貌似不错看看去谢谢楼主的分享

nevernam 2009-11-20

打赏
举报

强悍的探索精神

xiao_fan85 2009-07-01

打赏
举报

楼主好强大，收藏起来，谢谢啦

dongdongguan 2009-07-01

打赏
举报

路过，好帖顶起来

chaobin05240108 2009-07-01

打赏
举报

楼主很牛呀！

junp2007 2009-07-01

打赏
举报

好像opera下不好使

烟若辰星 2009-07-01

打赏
举报

顶顶~~~学习了~~

米兔痴愚 2009-07-01

打赏
举报

学习

liweitao103 2009-06-30

打赏
举报

纯CSS做的，不错。

程序猿之殇 2009-06-30

打赏
举报



#dyimgview .bd ul{

	position:relative;

	overflow:hidden;

	height:180px;

	padding:0 10px;

	list-style:none;

}

本文的精髓在于,巧妙的利用了 ul以及锚点.
1 height:180px;限制了ul的高, 所以只能显示一张图片.
2 <h3><a href="#a">1</a><a href="#b">2</a><a href="#c">3</a></h3>
<li id="a">
通过herf的锚点,激活对应id的li.

楼主的研究态度,令人佩服.

飘零雾雨 2009-06-14