选题自由发挥，提交一份完整的原创作品。作品需jquery知识点为主。要求1. 排版美观，设计合理，获20分； 2. 正确使用jquery DOM操作，获20分； 3. 合理运用jquery淡入\淡出效果或幻灯片效果，获10分； 4. 能够运用jquery插件，获10分；

题目：使用jQuery实现一个简单的图片展示网站

1. 网站概述

这是一个简单的图片展示网站，主要用于展示美丽的风景照片和旅游目的地的照片。网站使用jQuery实现图片轮播效果，并且使用jQuery插件实现图片的放大和缩小效果。

2. 网站结构

网站主要分为两个部分：导航栏和图片展示区域。导航栏包括网站的标题和两个按钮，分别用于切换到“风景照片”和“旅游目的地”的展示页面。图片展示区域包括一个轮播图和一个图片缩放区域。

3. 网站实现

3.1 导航栏

导航栏主要使用HTML和CSS实现，代码如下：

<header>
  <h1>图片展示网站</h1>
  <nav>
    <ul>
      <li><a href="#" class="active">风景照片</a></li>
      <li><a href="#">旅游目的地</a></li>
    </ul>
  </nav>
</header>

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background-color: #f0f0f0;
}

h1 {
  font-size: 24px;
  color: #333;
}

nav ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

nav li {
  margin-right: 20px;
}

nav a {
  color: #333;
  text-decoration: none;
  font-size: 16px;
}

nav a.active {
  font-weight: bold;
  color: #ff8c00;
}

3.2 图片展示区域

图片展示区域主要分为轮播图和图片缩放区域两个部分。轮播图使用jQuery实现，代码如下：

<div class="slider">
  <div class="slide"><img src="img/slide1.jpg" alt="slide1"></div>
  <div class="slide"><img src="img/slide2.jpg" alt="slide2"></div>
  <div class="slide"><img src="img/slide3.jpg" alt="slide3"></div>
</div>

.slider {
  position: relative;
  height: 500px;
  overflow: hidden;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

$(function() {
  var currentSlide = 0;
  var slideCount = $('.slider .slide').length;

  function showSlide(index) {
    $('.slider .slide').fadeOut();
    $('.slider .slide').eq(index).fadeIn();
  }

  function nextSlide() {
    currentSlide++;
    if (currentSlide >= slideCount) {
      currentSlide = 0;
    }
    showSlide(currentSlide);
  }

  setInterval(nextSlide, 3000);
});

图片缩放区域使用jQuery插件实现，代码如下：

<div class="gallery">
  <div class="image"><img src="img/image1.jpg" alt="image1"></div>
  <div class="image"><img src="img/image2.jpg" alt="image2"></div>
  <div class="image"><img src="img/image3.jpg" alt="image3"></div>
  <div class="image"><img src="img/image4.jpg" alt="image4"></div>
</div>

.gallery {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.image {
  width: 300px;
  height: 200px;
  margin: 20px;
  overflow: hidden;
  cursor: pointer;
}

.image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

$(function() {
  $('.image').zoom({
    on: 'click',
    magnify: 0.8
  });
});

4. 网站效果

网站效果可在以下链接中查看：

[图片展示网站](https://codepen.io/jiayanying/pen/QWgZKpO)

5. 总结

通过本次实践，我们学习了使用jQuery实现图片轮播和图片缩放效果的方法，并且使用jQuery插件简化了图片缩放效果的代码。在实践中，我们还学习了如何使用HTML和CSS实现网页结构和样式。这些知识点对于Web开发中的前端工程师来说非常重要，希望大家能够认真学习。