50天50个前端小项目（纯html+css+js）第十八天（背景轮播图）

mzldustu

于 2022-11-01 17:31:05 发布

阅读量644

点赞数 2

分类专栏： 50Day50前端基础小项目(纯三件套) 文章标签：前端 css javascript html

本文链接：https://blog.csdn.net/qq_45628733/article/details/127637671

版权

今天要做的是一个轮播图，不过是属于全屏类型的轮播图，先来看看效果：
在这里插入图片描述

点击左右按钮能切换背景，达到轮播图效果

来看代码实现部分，首先是html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
      integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="style.css" />
    <title>Background Slider</title>
  </head>
  <body>
    <div class="slider-container">
      <div
        class="slide active"
        style="
          background-image: url('https://images.unsplash.com/photo-1549880338-65ddcdfd017b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80');
        "
      ><