张伟龙

（重庆电子工程职业学院，重庆 401331）

基于jQuery技术的图片轮播效果设计

张伟龙

（重庆电子工程职业学院，重庆 401331）

图片轮播效果在互联网电子商务网站上应用极其广泛。基于jQuery技术，通过调用相关库函数，能够实现图片自动轮播和单击鼠标切换图片的效果。基于jQuery技术的图片轮播设计语句简短，易懂易学，并在多个浏览器平台上进行了测试，取得了良好效果。

图片轮播；jQuery；CSS；网站设计

0 引言

随着互联网宽带和技术应用的快速发展以及物流和支付系统的完善，电子商务购物网站得到了飞速发展，正在影响着千家万户的生活和经济行为，并日益成为社会商业活动的重要形式之一。综观国内互联网电子商务网站，淘宝、京东、当当等商城网站设计精美，尤其图片轮播效果更是引人关注。在互联网电子商务网站、电影网站以及各类商业网站中，往往通过大幅宣传图片占据首屏视觉黄金区域，达到吸引浏览者的目的。对于热销产品、主推产品、新品上架、店铺活动等则通过轮播方式将相关精美图片展示给浏览者。现在基本上每个网站都设有自动轮播的banner广告图，在没有任何按钮的情况下，图片在设定的时间内进行自动切换。

1 jQuery介绍

jQuery是一个JavaScript函数库，是一个快速、简洁的JavaScript框架。其宗旨是“Write Less，Do More”，即“写更少的代码，做更多的事情”。它可以简化HTML文档元素的遍历、事件处理、动画和A－jax交互以实现快速Web开发，可用来改变编写JavaScript脚本的方式。jQuery的文档非常丰富，支持CSS1-3的选择器，兼容IE 6.0+、FF 2+、Safari 3.0+、Opera 9.0+、Chrome等浏览器。……