零基础一篇文章实现网页轮播图效果，我太难了啊

最新推荐文章于 2022-05-08 15:25:25 发布

凃老师

最新推荐文章于 2022-05-08 15:25:25 发布

阅读量305

点赞数

本文链接：https://blog.csdn.net/tjx11111/article/details/104272788

版权

这篇博客通过实例教零基础的读者如何使用HTML、CSS和JavaScript实现网页轮播图效果。首先介绍轮播图的基本概念，然后分别讲解如何编写HTML页面结构，使用CSS进行美化，最后通过JavaScript实现动态轮播效果，并处理细节问题，完成轮播图的制作。

摘要由CSDN通过智能技术生成

你瞅啥？

有没有想过？一直从事流水线操作的你，或许在编程中的流程控制方面天赋异禀。有没有想过？一直以来左右逢源的你，或许也能靠手中的键盘做点大事？有没有想过？平时好像平淡无奇的你，或许身上埋藏了“程序员”的惊奇骨骼。

或者，也许你并没有！那么跟我一起动手试试就知道了！

不扯淡，上干货！

我们要做的成果展示（轮播图）：

菜单（需要的材料）：

html语言（处理页面结构）
css语言（美化页面）
javaScript语言（让页面动起来）

我们分别用3大模块来单独实现，做这个就别想那个

编写页面骨架html

我们在某个文件夹内点击鼠标右键，新建一个__文本文件__,像这样
接着我们在里面编写如下代码
标签有单、双之分，双标签以</标签名>为结束，标签内的标签是装在里面的东西
下面的结构是yong_hu_kan包含lun_bo_tu_he_zi

<html>
    <head>
        <title>这是我的轮播图页面哟</title>
    </head>
    <body>
        <div id="yong_hu_kan">
           <div id="lun_bo_tu_he_zi">
           		<!-- 这里未来放点东西 -->
            </div>     
        </div>
    </body>
</html>