功能齐全的纯css实现的轮播图

最新推荐文章于 2022-12-30 18:08:46 发布

hello worId

最新推荐文章于 2022-12-30 18:08:46 发布

阅读量266

点赞数 2

分类专栏： html css 文章标签： css html animation

本文链接：https://blog.csdn.net/weixin_44134674/article/details/109717141

版权

实现内容：
1.几张图片自动轮播
2.图片上有小圆点自动跟随图片移动
3.用css实现点击效果

效果图：类似携程官网
在这里插入图片描述

思路：
1.图片自动轮播可以在一个小的盒子里面设置一个大盒子，大盒子设置overflow：hidden；然后设置动画。为实现动画的过渡效果，可以在动画中间留有间隙。如：

@keyframes swiper {
   

    0%,
    18% {
   
      left: 0;
    }

    20%,
    38% {
   
      left: -1920px;
    }

    40%,
    58% {
   
      left: -3840px;
    }

    60%,
    78% {
   
      left: -5760px;
    }

    80%,
    98% {
   
      left: -7680px;
    }

    100% {
   
      left: -7680px;
    }
  }

2.小圆点的实现
将相同数量的小圆点用定位定到想要的位置，然后设置与图片动画时间过程相同的动画。
3.点击效果使用input标签里面的radio
4.点击时让图片和小圆点的动画暂停

    <input type="radio" name="bg_img" id="bg1">
    <label for="bg1"></label>
    <input type="radio" name="bg_img" id="bg2">
    <label for="bg2"></label>

点击label时相当于点击input 所以可以设置input标签隐藏。
然后设置点击label for bg1 时改变图片的定位。
完整代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  .my-swiper {
    
    position: relative;
    width: 1920px;
    height: 340px;
    margin: 0 auto;
    overflow: hidden;
  }

  /* 圆点定位 */
  .my-swiper>label[for^="bg"] {
    
    position: absolute;
    display: block;
    top: 310px;
    width: 10px;
    height: 10px;
    z-index: 100;
    line-height: 20px;
    background: #fff;
    opacity: .5;
    cursor: pointer;
    border-radius: 50%;
  }

最低0.47元/天解锁文章

hello worId

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
功能齐全的纯css实现的轮播图

实现内容：1.几张图片自动轮播2.图片上有小圆点自动跟随图片移动3.用css实现点击效果思路：1.图片自动轮播可以在一个小的盒子里面设置一个大盒子，大盒子设置overflow：hidden；然后设置动画。为实现动画的过渡效果，可以在动画中间留有间隙。如：@keyframes swiper {0%,18% { left: 0;}20%,38% { left: -1920px;}40%,58% { left: -3840px;}60%,78% { left
复制链接

扫一扫