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

张伟龙

（重庆电子工程职业学院，重庆 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等浏览器。由于简单易学，jQuery很快成为当今最为流行的JavaScript库，并成为开发网站等复杂度较低的Web应用程序的首选JavaScript库，并得到了大公司如微软、Google的支持。

jQuery有几千种丰富多彩的插件，大量有趣的扩展和出色的社区支持弥补了jQuery功能较少的不足，并为jQuery提供了众多非常有用的功能扩展。jQuery最有特色的语法特点就是与CSS语法相似的选择器，它支持CSS1到CSS3的几乎所有选择器，并兼容所有主流浏览器，这为快速访问DOM提供了方便。

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

本文是基于jQuery框架，以5幅图片为例，实现自动轮播以及单击鼠标切换图片的效果（图片轮播效果如图1所示）。该实现效果是在网页已经布局好的前提下实现的。当我们打开网页时，看到图片在自动切换显示，并且每显示一张图片，图片下方对应的图片标号底色会变亮，其余图片标号底色则变暗。当鼠标移动到某一个图片标号上时，其底色变亮，图片停止自动轮播，并切换到此标号对应的图片。当鼠标离开时，图片标号再次变暗，图片进入正常轮播状态。当鼠标移动到图上时，轮播停止，左右两侧标示箭头自动弹出，单击标示箭头时，图片切换，鼠标移走时，标示箭头自动隐藏，图片再次进入正常轮播状态。单击某个图片时，显示相应链接网页。

图1 图片轮播效果图

2.1 使用HTML和CSS设置静态图片区域

（1）首先，用DIV标签设计一个图片轮播的区域，命名为ppt。准备5张图片，大小为770px× 410px，并给图片编号。DIV设计的图片轮播区域大小与图片大小一致即可，用HTML插入准备好的5张图片，默认显示第一张图片。其次，图片标号与图片要一一对应，用ul和li来实现。在img后添加链接＜a href=””＞即可实现点击图片转到相应链接上，此处省略，主要代码如下：

（2）利用CSS设置HTML标记的样式。样式先设置DIV的大小、浮动和相对位置，对于超出部分自动隐藏。执行“display：block”命令，可让对象成为块级元素，由于图片是层叠状态，所以此时只显示第一张图片。li的数字与图片一一对应，位置在图片的右下角，背景也做了设置。通过circle_current设置当前焦点图片对应的标号并且背景色为亮色，失去焦点时背景色变暗。当鼠标移动到图片标号上时，由#circle li：hover属性设置背景色变亮。#pptpre和#pptnext是对左右两侧标示箭头设置。

2.2 使用jQuery库函数设置图片自动轮播效果

图片轮播的过程其实就是显示当前图片时，隐藏其他图片。先用hide（）方法隐身所有图片，再用shown（）方法显示获取当前焦点的图片。用times设置循环变量。自动轮播显示，使用DOM模型中的setInterval（），此方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。setInterval（）方法会不停地调用函数，直到clearInterval（）被调用或窗口被关闭。本文以1.5秒为周期，调用图片轮播函数。自定义函数changeImage（）是自动轮播图片的函数。在预览网页效果时，就会发现每显示一张图片，对应的图片标号背景色变亮，图片显示完成后，标号也会随之变暗。

2.3 使用鼠标改变图片显示效果

（1）当鼠标进入图片区域，图片停止轮播，当鼠标移动到某个图片标号时，标号变红，并显示当前标号的图片，即手动显示图片。each（）方法为每个匹配元素规定运行的函数，each（）函数封装了十分强大的遍历功能，使用也很方便，它可以遍历一维数组、多维数组、DOM、JSON等。$（"#circleli"）. each（function（index）可以遍历li图片标号，当鼠标在此图片标号上时，使用$（this）.addClass（"circle_current"）获取，再通过$（".ppt img：eq（"+index+"）"）.show（）显示对应的图片，其代码如下：

（2）当鼠标进入图片区域，左右两侧标示箭头缓慢移出，单击左侧标示箭头，图片和图片标号向前移动一位，反之向后移动；当鼠标离开图片区域，左右两侧标示箭头缓慢隐藏。animate（）方法执行CSS属性集的自定义动画，该方法通过CSS样式将元素从一个状态改变为另一个状态。其主要代码如下：

3 结语

本文主要介绍了基于jQuery库中相关函数的调用，改变CSS样式，实现图片轮播效果和单击鼠标切换图片效果。与JavaScript技术设计的图片轮播效果相比，代码更为简短，功能更为齐全。基于jQuery技术设计的图片轮播功能具有良好的稳定性和兼容性，在IE6+、火狐等浏览器中均可正常使用。

［1］吴瑞红，张环冲.浅谈JavaScript库［J］.科技信息，2010（9）.

［2］朱育发．jQuery与jQuery Mobile开发完全技术宝典［M］.北京：中国铁道出版社，2014.

［3］石磊.基于jq的宽幅图片切换设计与实现［J］.学科教育，2016（24）.

［4］高云．jQuery技术内幕：深入解析jQuery架构设计与实现原理［M］.北京：机械工业出版社，2014.

The design of picture carousel effect based on jQuery

ZHANG Wei-long (Chongqing College of Electronic Engineering,Chongqing 401331,China)

The application of picture carousel effect in the Internet e-commerce website is extremely wide,based on jQuery technology,by calling the related library functions;it can realize the automatic image carousel effect and switch by a click the mouse.The picture carousel design based on jQuery is brief and easy to learn;furthermore it has achieved good results in multiple browsers.

jQuery;CSS;Picture carousel;Website design

TP391.7

A

1673-2022（2017）01-0049-03

2016－10－20

张伟龙(1981-)，男，河北石家庄人，副教授，硕士，主要研究领域为现代无线通信技术、WEB应用开发。