飞龙博客

feilong.org 前端开发教程

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

飞龙更新于 2010-09-13 03:05 加入书签 CTRL+D 有 176 个朋友来过

一般的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]

飞龙初发:
2010-09-13 03:05
本文更新网址:
https://feilong.org/feilong-dtslider

所在目录: 网站开发

新作:

旧文:

  • html css js
  • angular react vue
  • flutter python