[TOC]

综合案例 随机图片

6.1、案例效果

随即图片-小图的切换&大图的展示.png

6.2、动态切换小图的分析和实现

  • 功能分析
    1. 准备一个数组
    2. 定义计数器
    3. 定义定时器对象
    4. 定义图片路径变量
    5. 为开始按钮绑定单击事件
    6. 设置按钮状态
    7. 设置定时器，循环显示图片
    8. 循环获取图片路径
    9. 将当前图片显示到小图片上
    10. 计数器自增
  • 代码实现
    ```html <!DOCTYPE html>
    综合案例 随机图片 - 图2 


<a name="32c25d6a"></a>
## 6.3、显示大图的分析和实现

-  **功能分析** 
   1. 为停止按钮绑定单击事件
   1. 取消定时器
   1. 设置按钮状态
   1. 将图片显示到大图片上
-  **代码实现**  
```javascript
//11.为停止按钮绑定单击事件
$("#stopBtn").click(function(){
    //12.取消定时器
    clearInterval(time);

    //13.设置按钮状态
    //启用开始按钮
    $("#startBtn").prop("disabled",false);
    //禁用停止按钮
    $("#stopBtn").prop("disabled",true);

    //14.将图片显示到大图片上
    $("#big").prop("src",imgSrc);
    $("#big").prop("style","width: 400px; height: 400px;");
});