纯css制作滑动pic or post slider思路
feilong.org 修订于2010-09-13 03:05:52 535 次浏览一般的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]
更新网址：https://feilong.org/feilong-dtslider
最初发布：20100913 03:05:52 feilong.org 于广州
加入收藏夹，查看更方便。
所在分类： 网站开发