【制作一个轮播图】

最新推荐文章于 2024-05-11 17:25:06 发布

m0_71941456

最新推荐文章于 2024-05-11 17:25:06 发布

阅读量243

点赞数 1

文章标签：前端

本文链接：https://blog.csdn.net/m0_71941456/article/details/134758953

版权

1、轮播图介绍

现在我们在很多网站上都能看到轮播图，像某东、某宝、某猫等等大小型网站上都有应用。

2.案例需求

制作一个轮播图

3.编程思路

1.设置两个盒子,里面存放要轮播的图片;
2.在css样式里面设置图片的大小,展示屏幕的大小,总屏幕的大小,以及轮播的属性(轮播的快慢,时间,循环次数等).

4.案例源码

CSS布局设置图片样式

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 设置显示部分屏幕宽高,溢出部分隐藏 */
      .content {
        width: 400px;
        height: 300px;
        overflow: hidden;
      }
      /* 设置屏幕宽度,以及动画轮播的属性设置 */
      .container {
        width: 1600px;
        animation: switch 10s ease-out infinite;
        /*动画:图片名称 时间 以低速结束 无限循环*/
      }
      /* 设置图片宽高,图片往左滑动 */
      .container img {
        width: 400px;
        height: 300px;
        float: left;
      }
      /* keyframes:必需的。动画持续时间的百分比。合法值：0%-100%。 switch:动画的名字*/
      @keyframes switch {
        0%,
        25% {
          margin-left: 0;
        }
        25%,
        50% {
          margin-left: -400px;
        }
        50%,
        75% {
          margin-left: -800px;
        }
        75%,
        100% {
          margin-left: -1200px;
        }
      }
    </style>
  </head>
  <body>
</html>

JS

  <div class="content">
      <div class="container">
        <img src="images/comment1.jpg" alt="" />
        <img src="images/comment2.jpg" alt="" />
        <img src="images/comment3.jpg" alt="" />
        <img src="images/comment4.jpg" alt="" />
      </div>
    </div>
  </body>