个人小作品之轮播图的制作
轮播图是一个页面中常见的特效。
本作品完整代码:点击查看本作品完整代码
首先来看看效果图:
整体来分析这个轮播图:
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="