<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图效果</title>
<!-- 引入外部样式文件 -->
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- 大容器 -->
<div class="slideshow">
<!-- 图片展示 -->
<div class="image">
<!-- 通过js改变src属性值替换图片 -->
<img src="./image/1.png" id="img-show">
</div>
<!-- 上一张按钮 -->
<div class="previous" id="to-pre">❮</div>
<!-- 下一张按钮 -->
<div class="next" id="to-next">❯</div>
<!-- 自由选择小圆点 -->
<div class="dots" id="dot-container">
<!-- 小圆点由 js 动态生成 -->
</div>
</div>
<!-- 引入外部脚本文件 -->
<script src="./slide.js"></script>
</body>
</html>
评论0