整理网站常用交互方式和实现方法（HTML+CSS+JS菜鸡版）

最新推荐文章于 2025-02-10 11:50:36 发布

番茄滑雪

最新推荐文章于 2025-02-10 11:50:36 发布

阅读量3k

点赞数 19

文章标签： html css javascript

本文链接：https://blog.csdn.net/m0_62516936/article/details/134613294

版权

本文详细介绍了如何在网站开发中实现轮播图、电梯导航栏的交互设计，下拉菜单的动态效果，以及鼠标经过图片放大和留言板的基本功能，以提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、轮播图

（1）概念：轮播图，或称banner图、广告图、焦点图、滑片。它是一个模块或者说窗口，当我们打开网站、APP、小程序等应用的首页，首先映入眼帘的就是轮播图。通过电脑上鼠标点击、手机上手指滑动后，可以看到多张图片。这些图片就都是轮播图，这个模块就叫做轮播模块。

（2）思路：将一些图片在一行中平铺，然后计算偏移量利用定时器实现定时轮播或点击按钮实现手动播放。如图1.1-1所示。

（图1.1-1）

（3）具体实现方法：

HTML部分：

创建一个大盒子里面存放轮播图的图片标签和左右按钮，标签下创建<div>或<ol>标签为后期存放图片轮播下面的小圆点。如下图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所示。这部分需实现显示和隐藏导航栏、点击导航栏页面滚动到对应的部分。在编译代码时需注意的点是，可以利用节流阀来解决导航过程中页面滚动出现的抖动现象，即点击事件完成后才能执行下一个点击事件。