网站搭建多少钱?适合零基础新手小白学习（详细讲解）-优快云博客

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Website</title>
  <!-- 引入外部样式表 -->
  <link rel="stylesheet" href="styles.css">
  <!-- 引入 jQuery 库，用于后续轮播图等交互功能 -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <!-- 引入自定义的 JavaScript 文件 -->
  <script src="script.js"></script>
</head>

<body>
  <!-- 导航栏 -->
  <nav class="navbar">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>

  <!-- 轮播图容器 -->
  <div class="carousel">
    <div class="carousel-slide active">
      <img src="image1.jpg" alt="Slide 1">
    </div>
    <div class="carousel-slide">
      <img src="image2.jpg" alt="Slide 2">
    </div>
    <div class="carousel-slide">
      <img src="image3.jpg" alt="Slide 3">
    </div>
    <!-- 轮播图指示器 -->
    <div class="carousel-indicators">
      <span class="indicator active" data-slide-to="0"></span>
      <span class="indicator" data-slide-to="1"></span>
      <span class="indicator" data-slide-to="2"></span>
    </div>
  </div>

  <!-- 主要内容区域 -->
  <section class="main-content">
    <h2>Welcome to Our Site</h2>
    <p>This is a simple website example. We are dedicated to providing various services and sharing useful information.
    </p>
  </section>

</body>

</html>

以下是对应的 styles.css 样式文件代码：

css

/* 全局样式 */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

/* 导航栏样式 */
.navbar {
  background-color: #333;
  color: white;
  padding: 10px 0;
}

.navbar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

.navbar ul li {
  display: inline-block;
  margin: 0 15px;
}

.navbar ul li a {
  text-decoration: none;
  color: white;
  transition: color 0.3s ease;
}

.navbar ul li a:hover {
  color: #ccc;
}

/* 轮播图样式 */
.carousel {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
}

.carousel-slide {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.carousel-slide.active {
  opacity: 1;
}

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

.carousel-indicators {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}

.carousel-indicators.indicator {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ccc;
  margin: 0 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.carousel-indicators.indicator.active {
  background-color: #333;
}

/* 主要内容区域样式 */
.main-content {
  padding: 20px;
  text-align: center;
}

.main-content h2 {
  margin-top: 0;
}

以下是 script.js 文件代码，用于实现轮播图的自动切换和点击指示器切换图片的功能：

javascript

$(document).ready(function() {
  // 轮播图自动切换函数
  function carouselAuto() {
    $('.carousel-slide.active').removeClass('active').next().addClass('active');
    if ($('.carousel-slide.active').length === 0) {
      $('.carousel-slide:first').addClass('active');
    }
  }

  // 初始化轮播图指示器点击事件
  $('.carousel-indicators.indicator').click(function() {
    var slideTo = $(this).data('slide-to');
    $('.carousel-slide').removeClass('active');
    $('.carousel-slide').eq(slideTo).addClass('active');
    $('.carousel-indicators.indicator').removeClass('active');
    $(this).addClass('active');
  });

  // 自动切换轮播图，每 3 秒切换一次
  setInterval(carouselAuto, 3000);
});

上述代码构建了一个简单的网站框架，包含基本的导航、轮播图展示和主要内容展示，并通过 CSS 样式美化页面，使用 JavaScript 实现了轮播图的交互功能。在实际的网站设计与开发中，还需要根据具体需求进一步完善功能、优化代码结构、添加更多页面和动态数据交互等复杂操作