效果图
静态的
动态的
图片素材
图片素材取自小米官网
说明
- HTML/CSS/JS代码分别保存在index.html/index.css/index.js 文件,而index.css和index.js文件又分别保存在 css 和 js 文件夹下
- 图片素材依次命名为:
pic_01.jpg
pic_02.jpg
等等,所有图片都保存在 img 文件夹中 - 示意图如下
源代码
HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>轮播图</title>
<!--引入css文件-->
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<div class="wrap">
<ul class="list">
<li class="item active"><img src="img/pic_01.jpg" alt="" /></li>
<li class="item"><img src="img/pic_02.jpg" alt="" /></li>
<li class="item"><img src="