前端小练习（实现轮播图效果）

最新推荐文章于 2024-05-17 06:14:41 发布

旧拾~

最新推荐文章于 2024-05-17 06:14:41 发布

阅读量1.3k

点赞数 2

分类专栏：前端小练文章标签：前端 javascript css

本文链接：https://blog.csdn.net/pretty6cool/article/details/125363514

版权

轮播图是各大网站常用的功能模块之一,下面我们一起来使用js实现轮播图效果吧。(最后附上完整代码)

效果呈现

第一步，创建swiper.html文件，然后创建并引入swiper.css和swiper.js文件，最后创建一个合适的容器，放上几张你喜欢的图片，代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Swiper</title>
  <link rel="stylesheet" href="./swiper.css">
</head>
<body>
  <div class="swiper-contanier">
    <ul id="swiper-list">
      <li><img src="./img/3.jpg"></li>
      <li><img src="./img/4.jpg"></li>
      <li><img src="./img/8.jpg"></li>
      <li><img src="./img/9.jpg"></li>
    </ul>
  </div>
  <script src="./swiper.js"></script>
</body>
</html>

第二步，在swiper.css文件中开始绘制基本样式，代码如下：

/*清除默认样式*/
*{
  margin: 0;
  padding: 0;
  text-decoration: none;
  list-style: none;
}
/*添加一个简单的背景颜色*/
body{
  background-image: linear-gradient(to right,rgb(251, 211, 255),rgb(188, 242, 255));
}
/*绘制外层容器大小及相关样式,这里配置的是一个宽高为800*400的容器*/
.swiper-contanier{
  position: relative; /*父级容器为相对定位*/
  width: 800px;
  height: