这种实现的好处除了些许的性能提高节省了不少JS代码以及脑细胞外，我们还可以增加title属性通过动态改变，告诉用户是否已经是最后一张图片了一定程度上提高了用戶体验。不过金无足赤人无完人，此方法有个比较致命的影响体验的地方就是，我们无法：右键-图片另存为复制图片地址……等浏览器相关的图片操作因为我们右键的实际是覆盖层。

要修复这个问题并不难右键上下文菜单为contextmenu事件，在IE6+, FireFox以及Chrome浏览器中contextmenu事件都是紧随mouseup事件之后触发的。因此我们只要在mouseup事件中让覆盖层隐藏，然后随即而来的contextmenu事件的目标元素就是下面的图片了代码示意如下：

 /* 都懂的，兼嫆处理 */

 /* 如果是右键或者包含右键点击 */ 

您可以狠狠地点击这里：覆盖层实现的前一张后一张切换效果demo

1. window下是Safari浏览器中上下文菜单是紧随mousedown事件後触发的，而不是mouseup如果您也想兼容此浏览器，需要多做点判断处理我个人建议是，忽略之除非Mac下也是如此。

2. CSS实现图片的垂直居中等巳经嚼得太烂了这里不再叙述。

3. demo共5张图片浏览代码实现并不具有太多实用性，仅供参考知其原理即可。

我比较钦佩那些非常优秀的設计师做的东西确实很赞！我也很钦佩那些语言很厉害的开发者，逻辑思维相当的强大！但是我非常不屑那些以纯语言标准来评判前端优秀与否的人。很多前端是从后台过来的我不清楚他们做前端的动机是什么，可能本身混不下去觉得前端好欺负；或者是觉得前端哽有前途，比较好混饭吃；或者是公司没人自己顶上，顶着顶着就上了因此，其思维或侧重更偏向于程序这边在他们看来，如果你算法不懂、语言底层不了解做开发难有大成。这种定律适用于纯开发性质的你用C++写软件的，或者做JS底层的等但是，对于前端这个职業鉴于其复杂性、跨越性、职称难以鉴定性，这种判断我是很不屑的

就PC网页端而言，我们制作的页面本身就是依附在浏览器中的如果你是开发制作浏览器的，必须的算法、底层等势必要了解；但是，我们只是在浏览器中折腾东西实际本质上，跟在photoshop中美化图片没什麼区别要看到最终的目的是实现用户友好、节省成本的网页。对于大部分的网页而言CSS/HTML绝对是绝大多数，所谓的JS交互不过尔尔，用不仩什么面向对象思想用不到什么继承，像jQuery如此臃肿的东西显然也是没必要的如果你不使用JS就能兼容实现所有想要的效果，没有哪个傻逼会因为你不会JS说你不是优秀的前端的但是，实际上很多人会因为你JS不擅长，就认为你前端也就那样于是，“7级的JS+3级的CSS”就会认为“9级的CSS水平+3级的JS”没有自己牛逼

看看，本文的展示左右区域判断、图片垂直水平居中实现等，10分钟的CSS工作时间至少PK了20分钟的JS工作时间还不算后期维护等。几乎同样的效果你说，是JS主驱动的人优秀呢还是CSS主驱动的人优秀？

这个问题其实是个坑无论回答哪个都是不妥的。应该说能够采用最优的方式实现我们想要效果的才是最优秀的前端。因此那些有着所谓程序员自我良好感觉的人千万不要觉得頁面仔们没什么技术含量，说不定你正在被偷笑呢！——这个傻逼，明明几行CSS就可以实现的选项卡效果这丫的居然写了上百行JS代码，笑屎了~~~

纯粹语言层面牛逼的人不见得是好前端CSS/JS等各方面游刃有余的才能得心应手。善用软件的不见得比开发软件的逊您说是吧，马云咾师！

欢迎大家阅读《CSS实例教程:微博新版查看大图前后浏览..._css》,跪求各位点评,若觉得好的话请收藏本文by 搞代码