项目1 设计简易灯箱画廊 1.实验所需素材 在trees文件夹中提供一个MP3文件和18个JPG文件，设计页面时可以使用。 2.编程实现简易灯箱画廊，鼠标单击任一个图像超链接，在底部浮动框架中显示大图像，效果如图1-3-1所示的页面。 使用web前端

项目1 设计简易灯箱画廊主要是为了通过HTML、CSS和JavaScript结合来创建一个交互式的图片浏览体验。以下是实现这个项目的步骤以及所需的素材：

1. **所需素材**：
- 确保你已经获得了在trees文件夹中的一个MP3音频文件，用于可能的音频播放功能。
- 有18张JPG图片文件，这些都是画廊中的原始图片，需要展示的大图像就是从这些中选取。

2. **HTML结构**：
- 创建一个基本的HTML布局，包含一个图片列表区域，每个图片都是一个<a>标签，设置href属性为对应的图片URL，同时关联一张小缩略图。

   <div class="gallery">
     <a href="image1.jpg" data-big-image="image1.jpg"><img src="thumbnail1.jpg"></a>
     <!-- ...重复17次，替换相应的图片和缩略图 -->
   </div>

3. **CSS样式**：
- 定义一个浮动的底部分框(`.floating-frame`)，用来显示大图。
- 为缩略图添加样式，使其响应点击事件并隐藏大图初始状态。

   .floating-frame {
     display: none;
     position: fixed; /* 静止在屏幕下方 */
     /* 添加其他样式... */
   }

4. **JavaScript/jQuery**：
- 使用`$(document).ready()`初始化，当文档加载完成后，绑定每个缩略图的click事件。

   $(function() {
     $('.gallery a').click(function(e) {
       e.preventDefault(); // 阻止默认跳转
       var bigImage = $(this).data('big-image');
       showBigImage(bigImage);
     });
   });

   function showBigImage(imageUrl) {
     $('.floating-frame').fadeOut();
     $('#big-image-container').html('<img src="' + imageUrl + '">');
     $('.floating-frame').fadeIn();
   }

5. **实现大图展示**：
- 在HTML中，创建一个隐藏的容器(`#big-image-container`)用于存放大图。

   <div id="big-image-container"></div>

完成以上步骤后，用户单击图片缩略图时，大图将在底部浮窗中显示出来，达到灯箱画廊的效果。