一个最简单的轮播图的制作(个人小作品)

本文介绍了如何制作一个基本的轮播图,包括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="
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值