整理网站常用交互方式和实现方法（HTML+CSS+JS菜鸡版）
一、轮播图
（1）概念：轮播图，或称banner图、广告图、焦点图、滑片。它是一个模块或者说窗口，当我们打开网站、APP、小程序等应用的首页，首先映入眼帘的就是轮播图。通过电脑上鼠标点击、手机上手指滑动后，可以看到多张图片。这些图片就都是轮播图，这个模块就叫做轮播模块。
（2）思路：将一些图片在一行中平铺，然后计算偏移量利用定时器实现定时轮播或点击按钮实现手动播放。如图1.1-1所示。
（图1.1-1）
（3）具体实现方法：
HTML部分：
创建一个大盒子里面存放轮播图的图片标签和左右按钮，标签下创建
- 标签为后期存放图片轮播下面的小圆点。如下图1.1-2所示。
（图1.1-2）
CSS部分：
定义全局，布局全局样式，消除页面对我们创建CSS布局时的影响，并设置盒子及图片宽高等样式，在添加样式时需注意到三个点：要消除li标签自带小黑点（list-style:none）；要使用定位消除高度塌陷；需在装图片的盒子上添加{overflow:hidden}来隐藏超出盒子的图片内容。设置好样式的效果例图如图1.1-3所示：
（图1.1-3）
JS部分：
这部分需实现左右按钮的显示与隐藏、动态生成小圆点、图片定时轮播、按下按钮或者小圆点手动播放图片等功能。在编译代码时需注意两个点：使用节流阀来解决轮播图按钮连续点击造成播放过快的问题；通过克隆第一张图片到最后一张图片后面的方法来实现无衔接播放，如下图1.1-4所示。
（图1.1-4）
（4）代表网站：京东官网京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！
二、电梯导航栏（点击跳转）
（1）概念：当页面内容过多时，浏览网页时滚动距离会变大，当你想回看上面的内容时，需要用鼠标滚轮或拉动滚动条来移动回去。这时如果网页设置电梯导航栏会提高网页阅读的方便性和高效性，我们只需要操作电梯导航栏上面的功能，就能去想要的模块，比如点击返回顶部按钮后会调转到页面顶部。
（2）思路：首先固定导航栏并将它隐藏，在页面滚动到某一位置时显示导航栏，通过点击侧边栏的模块名称可导航到指定板块位置。
（3）具体实现方法：
HTML部分：
创建楼层和导航栏标签并设置名称。
CSS部分：
设置楼层及导航栏样式，包括引入图片、颜色、字体等。如图1.2-1所示。
（图1.2-1）
JS部分：
这部分代码核心一是电梯导航模块和内容区模块序列号要对应，核心二时要利用到scrollTop()函数得到文档被卷去的头部的长度，如图1.2-2所示。这部分需实现显示和隐藏导航栏、点击导航栏页面滚动到对应的部分。在编译代码时需注意的点是，可以利用节流阀来解决导航过程中页面滚动出现的抖动现象，即点击事件完成后才能执行下一个点击事件。
（图1.2-2）
（4）代表网站：天猫国际
天猫国际Tmall.HK -100%正品保障 100%海外直供 100%售后服务-理想生活上天猫
三、下拉菜单
（1）概念：下拉菜单，是计算机网页中的一种展示效果。具体表现为：当用户选中一个选项后，该选单会向下延伸出具有其他选项的另一个选单。
（2）思路：下拉菜单由菜单栏、菜单、菜单项组成。当鼠标经过某文字时就会下拉出来一个列表可以进行点击，当鼠标离开时下拉列表又会消失。而鼠标在离开和经过文字时下拉或者收回的列表都是缓慢出来或离开的，所以用到一个动画效果。
（3）具体实现方法：
HTML部分：
创建列表标签，为ul>li>a，如图1.3-1所示。
（图1.3-1）
CSS部分：
大的ul列表需要进行平铺，在同一行展示。里面的ul列表不需要平铺，但都要把li自带的小黑点去掉（list-style:none）。设置菜单字体、颜色、高宽，注意文字要居中对齐。设置好样式如图1.3-2所示。
（图1.3-2）
JS部分：
这个部分需实现鼠标经过时下拉菜单 、鼠标离开时收回菜单的功能。直接用onmouseover、onmouseout比较生硬，使用jQuery的slideDown()函数可实现动态的缓慢下拉、收回菜单的效果，可用slideDown(1000)，让下拉动画1秒完成。如图1.3-3所示。
（图1.3-3）
（4）代表网站：小米商城小米商城 - Xiaomi 13、Redmi K60、MIX FOLD 2，小米电视官方网站
四、留言板
（1）概念：是可以用来记录、展示文字信息的载体，有比较强的时效性。网络留言板一般更集中反应更大范围的用户群体的信息。
（2）思路：利用节点的创建、添加和删除相关知识完成一个简易的留言板功能。在页面中实现单击“发布”按钮动态创建一个li元素，添加到ul里面。
（3）具体实现方法：
HTML部分：
需要一个