图片滑动栏
纯粹CSS制作图片滑动栏
之前翻译过用jQuery制作的精彩图片滑动栏的文章，又曾利用ul和页内锚点制作过水平滚动的网页。前几天突然想，为什么不也用ul和页内锚点来制作图片滑动栏呢？用js和 jQuery制作的图片滑动栏的效果虽然很漂亮，不过对SEO不友好，而且不同浏览器，不同平台对它们的支持也不一致。纯粹用css和html制作图片滑 动栏在这些方面是有好的表现的。 效果：样例（点击可见），下载样例 制作思路如图： 具体制作步骤： 1.搭建好框架 <body> <div id=”box”> <div id=”slider”> <ul id=”image-text-div”> <li id=”a4″ name=”a4″>滑动栏的内容：可只是图片也可图文并存</li> <li id=”a4″ name=”a4″>滑动栏的内容：可只是图片也可图文并存</li> <li id=”a4″ name=”a4″>滑动栏的内容：可只是图片也可图文并存</li> <li id=”a4″ name=”a4″>滑动栏的内容：可只是图片也可图文并存</li> </ul> </div> <ul id=”button”> <li><a href=”#a1″>1</a></li> <li><a href=”#a2″>2</a></li> <li><a href=”#a3″>3</a></li> <li><a href=”#a4″>4</a></li> </ul> </div> </body> 2.添加细节。“滑动栏的内容”加上具体的图片与文字。还有添加一些样式以控制显示效果。我在“滑动栏的内容”中加的是: <img src=”image/css-slider.jpg” /> <div> <h2>纯粹CSS图片滑动栏</h2> <p>这里是滑动栏的文字区域。主要是为了说明左边图片，摘要而已，字数不需多，重点突出即可。 此滑动栏用到HTML和CSS。</p> </div> 3.添加样式 *{ margin:0; padding:0;} body{ [...]
55个精彩的图片滑动栏
近忙一项目，用到图片滑动栏，乃广涉猎，觅此类佳作，巧在reader上看到WDL上这文《55 Inspiring Examples of Slideshows in Web Design》，得来全不费功夫，于是翻译，水平有限，错 漏请指正。 网站用来乘载信息的，大版块的意义在于让最重要的信息吸引它所应该得到的注意力。一个好方法就是在首页中使用图片滑动栏。图片滑动栏的功效来源于它 能在有限的空间中展示几个内容信息。另外滑动也是一种吸引注意力的好方法。 在交互效果很精彩的jQuery等技术的应用下，图片滑动栏已成为网页设计中潮流。之前，我们曾经写过一篇文章介绍很多jQuery图片滑动栏技术和入门教程。这篇文章收集了在网页设计中应用了图片滑动栏的55例子。 Osmond Interactive James Lai Creative open source design network Graphik Deluge Studios sprinkle penny Routes Melatonin zuno Radium paramoreredd Verdeo Tea Round Nosotros Brooklyn Fare Viget Labs zcope Syncopy hipstamatic copimaj mint SlideDeck launchmind.com Jumsoft NCover valen glue MacPaw Hwo Architects Espresso Apartments [...]