基于jquery技术的图片轮播效果设计参考.pdfVIP

第 19 卷第 1 期 河 北 软 件 职 业 技 术 学 院 学 报 Vol. 19Ｎo. 1 第 1 期 ２０17 年 3 月 Ｊｏｕｒｎａｌ ｏｆ Ｈｅｂｅｉ Ｓｏｆｔｗａｒｅ Ｉｎｓｔｉｔｕｔｅ Mar.２０17 文章编号： 1673-２０２２（２０17）０ 1-００49-０3 基于 jQuery 技术的图片轮播效果设计 张伟龙 （重庆电子工程职业学院，重庆4０1331 ） 摘要：图片轮播效果在互联网 电子商务网站上应用极其广 学，jQuery 很快成为当今最为流行的 JavaScript 库， 泛。基于 jQuery 技术，通过调用相关库函数，能够实现图片 并成为开发网站等复杂度较低 的 Web 应用程序 的 自动轮播和单击鼠标切换图片的效果。基于jQuery 技术的 首选 JavaScript 库，并得到了大公司如微软、Google 图片轮播设计语句简短，易懂易学，并在多个浏览器平台 的支持 。 上进行了测试，取得了良好效果。 jQuery 有几千种丰富多彩 的插件， 大量有趣 的 关键词： 图片轮播；jQuery ；CSS ；网站设计 扩展和 出色的社区支持弥补 了 jQuery 功能较少的 不足 ， 并为 jQuery 提供 了众 多非常有用的 功能扩 中图分类号：TP391.7 文献标志码：A 展。jQuery 最有特色 的语法特点就是与 CSS 语法相 似 的选择器 ， 它支持 CSS1 到 CSS3 的几乎所有选 ０ 引言 择器 ， 并兼容所有主流浏览器 ，这为快速访问 DOM 提供了方便 。 随着互联网宽带和技术应用的快速发展以及 物流和支付系统的完善， 电子商务购物网站得到 ２ 基于 jQuery 技术的图片轮播效果设计 了飞速发展， 正在影响着千家万户的生活和经济 本文是基于 jQuery 框架，以 5 幅图片为例 ，实现 行为， 并日益成为社会商业活动的重要形式之一。 自动轮播以及 单击鼠标切换图片的效果 （图片轮播 综观国内互联 网电子商务网站，淘宝、京东、当当等 效果如图 1 所示 ）。该实现效果是在网页已经布局好 商城网站设计精美，尤其图片轮播效果更是引人关 的前提下实现的。当我们打开网页时，看到图片在 注。在互联网电子商务网站、 电影网站以及各类商 显示，并且每显示一张图片，图片下方对应 自动切换 业网站中， 往往通过大幅宣传图 片占据首屏视觉 的图片标号底色会变亮 ，其余 图片标号底色则变暗。 黄金区域，达到吸引浏览者的目的。对于热销产品、