本文共 12191 字,大约阅读时间需要 40 分钟。
当当网的经过一个星期的设计和制作,昨天终于全部上线了。
在完成过程中,主要遇到的问题是首页的图片的轮转效果。效果如下:
访问地址:
需求:
1. 绿色区域要求在图片上方,半透明显示
2. 当鼠标移动到红色区域,切换相应的图片
3. 首页的三张大图轮转
HTML:
CSS:
引入River Zhang 的fr.carousel.js
可以实现图片的轮转效果,但是点击图片后,每次链接跳转都是最后一张图的a href
查看fr.carousel.js ,原来,它实现的思路是将三张图一张叠在一张上边,使用setInterval() ,将一张图的opacity 值置为1,其余两张为0。但是,这将导致你点击图片后,每次的链接都是最上边的那张图(即最后倩碧那一张)。
解决方法:
设置轮转图的 z-index,当图片显示的时候,其父节点<a> 的z-index 比其它元素高。
jQuery实现:
转载地址:http://nukvi.baihongyu.com/