图片切换

小博老师演示常用JQuery效果 ——图片轮播

二次信任 提交于 2019-12-10 07:56:11
[ 理论知识 ] 我们在实际开发应用程序的过程中,经常会遇到 图片轮播 的效果需求,本文小博老师就为大家演示一下,如何使用 JQuery 框架实现 图片轮播 的效果。 [ 步骤解读一 ] 界面布局 首先我们创建一个HTML页面,核心代码如下: <body> <div align="center" id="div_document"> <div align="center" id="div_document_content"> <!-- 图片轮播整体布局 --> <div align="center" id="div_imgPlayer"> <!-- 轮播图片显示部分 --> <div align="center" id="div_imgPlayer_img"> <!-- 前景显示图片 --> <img src="images/teamsh2.jpg" width="100%" id="img_foreground" /> <!-- /前景显示图片 --> <!-- 背景预加载图片 --> <img src="images/teamsz2.jpg" width="100%" id="img_background" /> <!-- /背景预加载图片 --> </div> <!-- /轮播图片显示部分 --> <!-- 轮播控件部分 --> <table id="table