html人物轮播图代码

HTML人物轮播图代码

html>
      head>
        title>
    人物轮播图/title>
        style>
      .container {
            width: 600px;
            height: 400px;
            margin: 0 auto;
            position: relative;
            overflow: hidden;
      }
      .slider {
            width: 3000px;
            position: absolute;
            top: 0;
            left: 0;
            animation: slider 10s infinite;
      }
      .slider img {
            float: left;
            width: 600px;
            height: 400px;
      }
      @keyframes slider {
        0% {
              left: 0;
        }
        20% {
              left: 0;
        }
        25% {
              left: -600px;
        }
        45% {
              left: -600px;
        }
        50% {
              left: -1200px;
        }
        70% {
              left: -1200px;
        }
        75% {
              left: -1800px;
        }
        95% {
              left: -1800px;
        }
        100% {
              left: -2400px;
        }
      }
        /style>
      /head>
      body>
        div class="container">
          div class="slider">
            img src="image1.jpg">
            img src="image2.jpg">
            img src="image3.jpg">
            img src="image4.jpg">
            img src="image5.jpg">
          /div>
        /div>
      /body>
    /html>
    

上述代码实现了一个简单的人物轮播图，使用了CSS3的动画效果，每隔10秒自动切换下一张图片。其中，container表示轮播图的容器，slider表示轮播图的整个内容。使用position:absolute将slider放到container容器的左上角，使用float:left让每一张图片横向排列，并且设置了图片的宽度和高度。使用animation属性指定了slider的动画效果，通过@keyframes定义了10个时间点的动画效果，让slider可以循环播放。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！