Weber's Showcase：滑动幻灯片实现原理

演示  http://www.iweber.org/

功能  作为一个作品展柜，自然希望当鼠标停留在作品名称上时，下面自动跳转到对应作品的介绍。

问题  怎么实现？有人说，直接用javascript呀，类似于tab的实现方法，对几个作品设置“display:none”，同一时间只有一个作品介绍的样式取消隐藏，这是最简单的方法。是的，但我觉得那样的过渡太突兀；有人说，那就考虑用jQuery插件，图片幻灯片的插件有的是，有的效果还做得很炫呢。这倒是不错，但是很多这样的插件无法像我这样，将菜单项和下面的作品介绍绑定起来，定制到这种程度，都不是同一个div的内容，很多插件的样式已经很固定了；有人说，那你直接用最简单的jQuery动画效果吧，这总该行了吧，如fadein、fadeout、slideToggle等函数就可以实现过渡效果。别说，我试了，然后发现这些函数是通过设置 display 属性在 none 和 block 中变换来实现的，问题是，我的作品介绍div里面有用到浮动元素，将div设置“ display:block”之后，div无法适应浮动子元素的高度，导致子元素的内容溢出，如下图

此时父元素div的高度为0，就出现上面的样子。当然我们可以在父元素div外面再套一层div，讲slideToggle等函数作用在最外层，可是这样html增加了无意义标签且增加了嵌套层数。唉，没办法，那我只能从左右切换图片幻灯片的实现原理下手了。

原理   经过艰辛的查证和查看代码，发现实现原理原来很简单：将各个作品介绍的div横向摆成一排，将父元素设置 "overflow:hidden" ，然后切换的时候就使用jQuery函数animate改变margin-left属性就可以达到左右切换效果了。

代码   css代码：

html代码：

javascript代码：

当我去掉 "overflow:hidden" 属性时，是这个样子的，排成一横排：

总结   一个简单图片切换功能，纠结了好久。现在评价下上面的方法实现：

• 优点
  
  • 每一个作品展示可以包括图片，包括文字，包括各种内容，对于内容没有太多限制
  • 就算里面有浮动元素，设置父元素"display:inline-block"，切换效果都可以正常运行
  • 代码少，如果只是想实现简单的切换幻灯片效果，推荐使用
• 缺点
  
  • 没有使用jquery插件那样简单易上手，对使用者的编程能力有所要求
  • 最好每个作品简介的宽度、高度一致

具体怎样将菜单和下面的切换绑定起来，大家可以参考下我的源代码

后话   希望我这篇文章讲得够明白，让大家都能掌握左右图片切换效果的实现。weber's showcase 的技术分析也差不多了，接下来的文章会从整体评价该html模板优缺点，让大家有所了解，更易于代码使用