返回

创意月饼轮播：用代码烘烤中秋美味

前端

中秋佳节，月圆人团圆，甜蜜美味的月饼是节日的标配。为了烘托喜庆的气氛，我们用代码实现了一个创意月饼轮播图，展示各种各样诱人的月饼图片。月饼轮播图不仅赏心悦目，还充满了创意，让您在中秋佳节感受到不一样的乐趣。

月饼轮播图制作

  1. 准备工作

    • 首先，您需要准备一些月饼图片。图片格式可以是JPG、PNG或GIF，分辨率至少为640x480像素。
    • 然后，您需要安装一个代码编辑器，如Visual Studio Code或Atom。
    • 最后，您需要下载并安装Node.js和npm。

  2. 创建项目

    • 打开代码编辑器，创建一个新的项目文件夹。

    • 在项目文件夹中，打开命令行窗口，输入以下命令：

      npm init -y

    • 这将创建一个新的package.json文件。

  3. 安装依赖

    • 在命令行窗口中，输入以下命令：

      npm install express ejs body-parser

    • 这将安装三个依赖：Express.js、EJS和Body-Parser。

  4. 创建服务器

    • 在项目文件夹中，创建一个名为server.js的文件。

    • 在server.js文件中，输入以下代码：

      const express = require('express');
const ejs = require('ejs');
const bodyParser = require('body-parser');

const app = express();

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

app.set('view engine', 'ejs');

app.get('/', (req, res) => {
  res.render('index', {
    mooncakes: [
      {
        name: '五仁月饼',
        image: 'https://i.imgur.com/5rnb789.jpg',
        description: '五仁月饼是经典的传统月饼，内馅由五种坚果制成，包括核桃、杏仁、花生、瓜子和芝麻。'
      },
      {
        name: '蛋黄莲蓉月饼',
        image: 'https://i.imgur.com/n89h765.jpg',
        description: '蛋黄莲蓉月饼是另一种经典的月饼，内馅由莲蓉和咸蛋黄制成，外皮酥松香脆。'
      },
      {
        name: '豆沙月饼',
        image: 'https://i.imgur.com/s67h890.jpg',
        description: '豆沙月饼是最受欢迎的月饼之一，内馅由红豆沙制成，外皮软糯香甜。'
      }
    ]
  });
});

app.listen(3000, () => {
  console.log('Server listening on port 3000');
});

  5. 创建视图

    • 在项目文件夹中，创建一个名为views的文件夹。

    • 在views文件夹中，创建一个名为index.ejs的文件。

    • 在index.ejs文件中，输入以下代码：

      <!DOCTYPE html>
<html>
<head>

  <link rel="stylesheet" href="/style.css">
</head>
<body>
  <h1>创意月饼轮播</h1>
  <div id="carousel">
    <% mooncakes.forEach(function(mooncake) { %>
    <div class="slide">
      <img src="<%= mooncake.image %>" alt="<%= mooncake.name %>">
      <div class="caption">
        <h3><%= mooncake.name %></h3>
        <p><%= mooncake.description %></p>
      </div>
    </div>
    <% }); %>
  </div>

  <script src="/script.js"></script>
</body>
</html>

  6. 创建样式表

    • 在项目文件夹中，创建一个名为style.css的文件。

    • 在style.css文件中，输入以下代码：

      #carousel {
  width: 600px;
  height: 400px;
  overflow: hidden;
  position: relative;
}

.slide {
  width: 600px;
  height: 400px;
  float: left;
}

.caption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
}

  7. 创建脚本

    • 在项目文件夹中，创建一个名为script.js的文件。

    • 在script.js文件中，输入以下代码：

      (function() {
  const carousel = document.getElementById('carousel');
  const slides = carousel.querySelectorAll('.slide');
  const nextButton = document.getElementById('next-button');
  const prevButton = document.getElementById('prev-button');

  let currentSlide = 0;

  nextButton.addEventListener('click', function() {
    currentSlide++;
    if (currentSlide >= slides.length) {
      currentSlide = 0;
    }
    carousel.style.transform = `translateX(-${currentSlide * 600}px)`;
  });

  prevButton.addEventListener('click', function() {
    currentSlide--;
    if (currentSlide < 0) {
      currentSlide = slides.length - 1;
    }
    carousel.style.transform = `translateX(-${currentSlide * 600}px)`;
  });
})();

  8. 运行服务器

    • 在命令行窗口中，输入以下命令：

      npm start

    • 这将启动服务器。

  9. 访问网站

    • 在浏览器中，输入以下地址：

      http://localhost:3000

    • 您将看到创意月饼轮播图。

总结

我们用代码实现了一个创意月饼轮播图，展示了各种各样诱人的月饼图片。这个轮播图不仅赏心悦目，还充满了创意，让您在中秋佳节感受到不一样的乐趣。

如果您有兴趣了解更多关于这个项目的细节，可以查看项目代码：

https://github.com/code-maze/creative-mooncake-carousel

祝您中秋快乐！