（39）css3实现轮播图效果

最新推荐文章于 2023-08-16 19:42:37 发布

泽哥ins

最新推荐文章于 2023-08-16 19:42:37 发布

阅读量514

点赞数 1

分类专栏： CSS3 文章标签： css3 css html

本文链接：https://blog.csdn.net/qq_36213140/article/details/121999549

版权

CSS3 专栏收录该内容

53 篇文章 4 订阅

订阅专栏

css3的轮播图和js的轮播图的区别？

css3：没有一些js的逻辑，优点，过渡动画比较漂亮，缺点：兼容问题。无法实现自动轮播和点击轮播一起同时出现的效果。

js轮播图：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>css3实现轮播图效果</title>
  <style>
    /*清除默认样式*/
    body,div,input,label {
      margin: 0;
      padding: 0;
    }
    /*外部盒子*/
    .box {
      position: relative;
      width: 450px;
      height: 300px;
      margin: 50px auto;
      border: 1px solid #000;
      overflow: hidden;
    }  
    .box input {
      /* 将input与label绑定，在把input隐藏掉，点击label的效果和input一样 */
      display: none;
    }
    .box .pic {
      /* 图片盒子 */
      position: absolute;
      left: 0;
      /* 让图片盒子装满所有图片的尺寸 */
      width: 5000px;
      height: 300px;
      /* 添加过渡动画效果 */
      transition: all 2s ease 0s;
      /* transition属性需要考虑兼容性 */
      -webkit-transition: all 2s ease 0s;
      animation: move 5s ease infinite 0s;
    }
    .box .pic img {
      /* 将图片设置左浮动 */
      float: left;
      width: 450px;
      height: 300px;
    }
    .box .page {
      position: absolute;
      left: 100px;
      bottom: 50px;
      width: 200px;
      height: 20px;
    }
    .box .page label {
      /* 将label按钮左浮动 */
      float: left;
      /* 每一个按钮都是20的宽高度 */
      width: 20px;
      height: 20px;
      /* 设置边框圆角 */
      border-radius: 50%;
      /* 每一个按钮的右侧都有间距 */
      margin-right: 20px;
      background-color: #fff;
    }
    /* 当input1或者label第一个被选中时它的兄弟元素pic进行left偏移。 */
    
    /* 1.实现点击轮播，transition */
    .box #page1:checked ~.pic {
      left: 0;
    }
    /* 偏移一个图片的宽度 */
    .box #page2:checked ~.pic {
      left: -450px;
    }
    /* 偏移两个图片的宽度 */
    .box #page3:checked ~.pic {
      left: -900px;
    }
    /* 2.实现自动轮播@keyframes +  animation */
    @keyframes move {
      0% {
        left:0;
      }
      33.33% {
        left:-450px;
      }
      66.66% {
        left: -900px;
      }
      100% {
        left: -1350px;
      }
    }
    /* @keyframes也有浏览器兼容问题 */
    @-webkit-keyframes move {
      0% {
        left:0;
      }
      33.33% {
        left:-450px;
      }
      66.66% {
        left: -900px;
      }
      100% {
        left: -1350px;
      }
    }
  </style>
</head>
<body>
  <div class="box">
    <input type="radio" name="slider" id="page1" checked>
    <input type="radio" name="slider" id="page2">
    <input type="radio" name="slider" id="page3">
    <div class="pic">
      <img src="images/1.jpg" alt="">
      <img src="images/2.jpg" alt="">
      <img src="images/3.jpg" alt="">
      <!-- 如果是自动轮播需要将第一张图片作为第4张 -->
      <img src="images/1.jpg" alt="">
    </div>
    <div class="page">
      <label for="page1"></label>
      <label for="page2"></label>
      <label for="page3"></label>
    </div>
  </div>
</body>
</html>

泽哥ins

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
（39）css3实现轮播图效果

css3的轮播图和js的轮播图的区别？css3：没有一些js的逻辑，优点，过渡动画比较漂亮，缺点：兼容问题。无法实现自动轮播和点击轮播一起同时出现的效果。js轮播图：js逻辑很多，可以做的很复杂，可以实现点击轮播和自动轮播同时生效的轮播图，缺点：过渡效果不好看。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-C
复制链接

扫一扫