飞龙博客

深入经藏 智慧如海

纯css制作滑动pic or post slider思路

feilong.org 修订于2010-09-13 03:08:29 1,454

一般的pic slider或post slider用到js,飞龙这里自个做了个纯css的slider,不用半句js,完全符合语义化xhtml要求,实现类似js滑动自动出现pic图片或日志内容的效果。当然,这个滑动图片或日志焦点图,初始载入不会自动图片或日志内容滚动或翻滚渐变特效的,但是对于一般网站已经相当够用了!本日志更新网址:http://feilong.org/feilong-dtslider  飞龙第4次修订于20100913 ,希望对您有用!

以下是飞龙纯css制作滑动picslider 的 xhtml部分,xhtml的语义化编写原则就体现在这。采用ul dl实现。依次出现的图片应该是无序列表或有序列表,而每个图片包括3个部分:序号、图片、图片描述。用到尽可能少的class,几乎不做hack工作。

<div class="fldtslider">
<ul>
<li><a class="one" href="#">1</a>
<dl class="first">
<dt><a href="http://feilong.org/feilong-dtslider"><img src="dtslider/feilong1.gif" alt="飞龙dt slider 纯css制作" /></a></dt>
<dd><a href="#">title1</a></dd>
</dl>
</li>
<li><a class="other" href="#">2</a>
<dl>
<dt><a href="http://jiaju99.com"><img src="dtslider/feilong2.jpg" alt="飞龙的家具久久店" /></a></dt>
<dd><a href="#">title2</a></dd>
</dl>
</li>
<li><a class="other" href="#">3</a>
<dl>
<dt><a href="http://feilong.org/about"><img src="dtslider/feilong3.jpg" alt="飞龙的书法字" /></a></dt>
<dd><a href="#">title3</a></dd>
</dl>
</li>
</ul>
<div class="fix"></div>
</div>

css部分略,有需要feilong dt slider源文件的朋友,[hide 1]联系飞龙[hide 1]

更新网址:http://feilong.org/feilong-dtslider
最初发布:20100913 03:05:52 feilong.org 于广州

加入收藏夹,查看更方便。

所在分类: 网站开发

新作:

旧文:

飞龙前端QQ群