星期五 小雨 13～19℃
前两晚写的js图片轮播(jquery)
前两晚写的，今晚整理一下。
点击查看 demo，源码可在 demo 页右键查看。
说明：
- 当鼠标经过序号时，是用户的主观行为，此时没有过渡效果，而是直接切换，排除过渡的等待时间（这一点参考了淘宝橱窗广告）。
- 当鼠标不在图片区域时，自动播放开始，此时切换图片不是用户的主观行为，所以启用过渡效果，不会显得太过突兀。
- 图片列表写成 html，而不是用 js 动态生成，一方面是考虑让图片随页面自然加载，不会滞后，另一方面有利于 SEO，而序号 ico 则是通过 js 动态生成。
- 无图片数量限制，按规律增减 <li> 即可。
参数说明：
bslider({
// jquery 对象
elem : $("#banner"),
// 切换间隔时间（毫秒）
time : 3000,
// 切换速度，即动画持续时间（毫秒）
speed : 1000,
// 鼠标经过 ico 延时触发（毫秒）
ico_time : 200,
// 图片宽度
width : 590,
// 图片高度
height : 150,
// ico 的位置，可选值：right-bottom / left-bottom / center-bottom
position : "right-bottom"
});
2012-11-27 更新：
增加 ico_time 参数。
发表评论