一个最简单的轮播图的制作（个人小作品）

最新推荐文章于 2022-08-20 11:10:40 发布

「已注销」

最新推荐文章于 2022-08-20 11:10:40 发布

阅读量2.9k

点赞数 4

分类专栏：个人小作品

本文链接：https://blog.csdn.net/h15882065951/article/details/73201456

版权

本文介绍了如何制作一个基本的轮播图，包括HTML布局、CSS样式和JavaScript实现。通过分析轮播图结构，使用<div>元素表示整体盒子和图片背景，利用<img>标签和定位技术展示图片。同时讲解了<img>标签的宽高设定和"alt"属性的重要性，以及CSS中的绝对定位和透明度效果。最后讨论了企业规范，如模块化开发、注释和优化网站速度的方法。

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

个人小作品之轮播图的制作

轮播图是一个页面中常见的特效。

本作品完整代码：点击查看本作品完整代码

首先来看看效果图：

整体来分析这个轮播图：

1、可以将这个轮播图整体看作成一个大盒子。即用一个<div>表示。

2、图片部分，图片的尺寸大小与整体盒子的尺寸大小一样，也就是说图片区域继承了整体盒子的尺寸大小，用一个<div>来装<img>。

3、因为这个轮播图的效果是不同图片的切换其后面的背景颜色也同时切换，因为需要用一个<div>来表示一个图片的背景部分。

4、按钮部分，使用定位来定义按钮的位置，切换不同的图片，其相应的按钮也切换为不同的按钮。

根据思想可以完成HTML部分的布局：

<!doctype html>
<html lang="zh-Hans-CN">
  <head>
    <meta charset="utf-8">
    <title>轮播图</title>
    <meta name="Keywords" content="轮播">
    <meta name="Description" content="轮播">
    <link rel="stylesheet" href="css/lunbo.css">
  </head>
  <body>
  
    <!-- banner start -->
    <div id="wrapper" class="wrapper">
      <div id="banner" class="banner banner-first">
        <div id="banner-box" class="banner-box">
          <img src="images/1.webp" width="1130" height="