【网页设计期末】咖啡商城网页代码

本文资源：咖啡商城网页代码html+CSS+JavaScript_前端-CSDN问答

---

1.题目要求

用HTML+CSS+JavaScript创建网站项目 说明:制作首页、登录页、列表页。要求:
1、首页页面结构:logo，导航，轮播，商品列表(九宫格结构，
每一格均含图片及其名称，图片，商品名称，商品简介)，页脚。
2、登录页结构:账户名、密码输入框，登录和注册按钮。
3、 列表页结构:logo、导航，列表页每一项均含图片及其名称，
详细介绍 页面直间可以相互跳转，控制台可打印显示登录信息

2.页面效果

1.主页

2.登录页

3.列表

3.实现功能

1.主页

该页面实现了一个简单的图片轮播功能，具体的实现如下：

1. 获取HTML中的轮播容器、轮播元素、上一页按钮和下一页按钮的DOM元素。
2. 获取每个轮播项的宽度（假设宽度相同），用于计算位移。
3. 初始化一些变量，包括当前轮播的位置(currentPosition)和轮播是否被暂停(isPaused)。
4. 定义了一个autoPlay函数，用于实现自动轮播效果。在该函数中，根据当前位置进行位移，并判断是否到达轮播项的最后一个，若是则回到第一个。使用setTimeout函数每隔5000毫秒（5秒）调用一次autoPlay函数，实现自动轮播。
5. 添加了鼠标进入和离开轮播容器时的事件监听器，以控制轮播的暂停和继续。
6. 添加了上一页和下一页按钮的点击事件监听器，用于手动切换轮播项。
7. 最后，调用autoPlay()函数启动自动轮播。

2.登录页

该页面定义了两个函数，分别为login()和register()

1. login函数：

   • 获取登录页面中id为'username'和'password'的输入框的值。
   • 使用console.log输出登录时的用户名和密码信息。

2. register函数：

   • 获取注册页面中id为'username'和'password'的输入框的值。
   • 使用console.log输出注册时的用户名和密码信息。

4.视频演示

咖啡商城效果演示