7.2.5　实验步骤

7.2.5　实验步骤

任务1实验分解

（1） 打开HBuilderX 进入开发界面，选择“文件新建项目”菜单，进入新建项目界面。选择普通项目，输入项目名称“PictureRotation”，并选择默认项目，点击创建按钮。

（2） 在项目窗口PictureRotation上，右键选择“新建html文件”，输入文件名称“index”，点击创建按钮。

（3） 在实验资料与素材中找到图片文件，选中全部图片复制，并粘贴到项目中，如图7.5所示。

图7.5

（4） 在新建html文件下，写入如下基础代码。

效果如图7.6所示。

图7.6

（5） 在项目窗口PictureRotation上，找到js文件夹右键选择“新建JavaScript文件”，输入文件名称“lbt.js”，点击创建按钮，并在新建文件下编写如下代码：

（6） 在实验资料与素材中找到jquery-3.4.1.js文件，选中文件复制，并粘贴到项目中，如图7.7所示。

图7.7

（7） 在页面的＜head＞标签里面加上jquery的引入代码。

（8） 添加script标签。

代码如下：

（9） 调用插件中的方法，传入对应的信息完成以下效果，最终效果如图7.8和图7.9所示。

图7.8

图7.9

新加代码：

至此完成任务1所有要求。