这篇博客介绍了如何使用JavaScript、HTML和CSS创建一个图片轮播效果。内容包括了9个必要的文件，分别是index.html、index.css和index.js，以及用于轮播的5张图片。确保所有文件放在同一个文件夹中，且文件名与教程要求一致。
1、index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$美少女战士$</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<!--相框-->
<div class="Photo-frame">
<!--照片条-->
<ul class="picBox clearFix" style="left: 0">
<li><a href="#"><img src="zhutu1.jpg" alt=""></a></li>
<li><a href="#"><img src="zhutu3.jpg" alt=""></a></li>
<li><a href="#"><img src="zhutu4.jpg" alt=""></a></li>
<li><a href="#"><img src="zhutu5.jpg" alt=""></a></li>
<li><a href="#"><img src="zhutu6.jpg" alt=""></a></li>
</ul>
<!--指示 小圆圈-->
<div class="circles">
<span in="0" style=" box-shadow: 0 0 10px 5px rgba(255,255,255,.7) inset"></span>
<span in="1"></span>
<span in="2"></span>
<span in="3"></span>
<span in="4"></span>
</div>
<!--箭头 next 右箭头-->
<div class="arrow" id="next"> > </div>
<!--左箭头-->
<div class="arrow" id="prev"> < </div>
</div>
<!--不能互换顺序-->
<script src="获取元素.js"></script>
<script src="index.js"></script>
</body>
</html>
2、index.css
@charset "UTF-8";
* {
padding: 0;
margin: 0;
}
img {
display: block; /*转换块级元素*/
}
ul li {
list-style: none;
}
/*清浮动的衣服*/
.clearFix::after,.clearFix::before {
content: '';
display: block;
line-height: 0;
clear: both;
}
.Phot
最低0.47元/天 解锁文章
扫一扫
2943
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
