css实现图片点击轮播

Love The Way You Lie 2022-01-23 02:07 479阅读 0赞

css实现点击按钮图片轮播

html代码

  1. <head>
  2.     <meta charset="utf-8" />
  3.     <title></title>
  4.     <link rel="stylesheet" href="css/index.css" />
  5. </head>
  7. <body>
  8.     <div class="slideshow middle">
  10.         <div class="slides">
  12.             <input type="radio" name="r" id="r1"  checked/>
  13.             <input type="radio" name="r" id="r2"  />
  14.             <input type="radio" name="r" id="r3"  />
  15.             <input type="radio" name="r" id="r4"  />
  17.             <div class="silde s1">
  18.                 <img src="img/1.jpg" alt="" />
  19.             </div>
  20.             <div class="silde">
  21.                 <img src="img/2.jpg" alt="" />
  22.             </div>
  23.             <div class="silde">
  24.                 <img src="img/3.jpg" alt="" />
  25.             </div>
  26.             <div class="silde">
  27.                 <img src="img/4.jpg" alt="" />
  28.             </div>
  29.         </div>
  31.         <div class="navigation">
  32.             <label for="r1" class="bar"></label>
  33.             <label for="r2" class="bar"></label>
  34.             <label for="r3" class="bar"></label>
  35.             <label for="r4" class="bar"></label>
  36.         </div>
  37.     </div>
  38. </body>

## css代码 ``` body { /*设置边框距离以及背景色*/ margin: 0; padding: 0; background-color: #34495e; }

.slideshow { /设置显示图片的大小，溢出隐藏/
width: 100%;
height: 100%;
overflow: hidden;
}

.middle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.navigation { /设置绝对位置，弹性布局，按钮位置/
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
}

.bar { /设置按钮属性/
width: 50px;
height: 10px;
border: 2px solid #fff;
margin: 6px;
cursor: pointer; /把鼠标设置为手/
transition: 0.3s; /按钮背景变色时间/
}

.bar:hover {
background: #fff;
}

input[name=“r”] {
position: absolute;
visibility: hidden;
}

.slides {
width: 400%;
height: 100%;
display: flex;
}

.slide {
width: 100%;
transition: 2s;
}

.silde img {
width: 100%;
height: 100%;
}

#r1:checked~ .s1 {
margin-left: 0;
}

#r2:checked~ .s1 {
margin-left: -25%;
}

#r3:checked~ .s1 {
margin-left: -50%;
}

#r4:checked~ .s1 {
margin-left: -75%;
}

发表评论

表情：
评论列表 （有 0 条评论，479人围观）

还没有评论，来说两句吧...

相关阅读

    相关 js实现点击轮播图

    效果图 今天讲下如何利用js做个点击操作的轮播图，效果图如下，因为无法传视频，只能截图了，代码在下面讲解，需要可以自己打出来运行。 ![在这里插入图片描述][wate

    谁践踏了优雅谁践踏了优雅/ 0 赞/ 62 阅读

    相关 简单的点击实现图片轮播~

    第一次写博客，从十点开始说要来写，换了个头像，现在才开始码字。 `学习web前端时间并不多，还没毕业的自学小白，想要用博客来记录自己的学习史。` `有问题的任意吐槽~`

    红太狼红太狼/ 0 赞/ 346 阅读

    相关 CSS实现图片轮播

    CSS3有个别特性,可以触发硬件GPU来加速渲染,而不是调用默认浏览器引擎渲染; 但是很多属性,默认都是不开启硬件加速的;需要触发条件,一个最简单的触发条件就是使用3D属性(

    布满荆棘的人生布满荆棘的人生/ 0 赞/ 341 阅读