首页 > 代码库 > css实现的轮播和点击切换(无js版)
css实现的轮播和点击切换(无js版)
.slide{ position: relative; margin:auto; width: 600px; height: 200px; text-align: center; font-family: Arial; color: #FFF; overflow: hidden; } .slide ul{ margin:10px 0; padding:0; width: 9999px; transition:all 0.5s; } /*//自动播放*/ .slide .slide-auto{ animation:marginLeft 10.5s infinite; } .slide li{ float: left; width: 600px; height: 200px; list-style: none; line-height: 200px; font-size: 36px; } .slide li:nth-child(1){ background: #9fa8ef; } .slide li:nth-child(2){ background: #ef9fb1; } .slide li:nth-child(3){ background: #9fefc3; } .slide input[name="sildeInput"]{ display: none; } .slide label[for^="sildeInput"]{ position: absolute; top:170px; width: 20px; height: 20px; margin: 0 10px; line-height: 20px; color: #FFF; background: #000; cursor: pointer; } @keyframes marginLeft{ 0%{margin-left: 0;} 28.5%{margin-left: 0;} 33.3%{margin-left: -600px;} 62%{margin-left: -600px;} 66.7%{margin-left: -1200px;} 95.2%{margin-left: -1200px;} 100%{margin-left: 0;} } .slide label[for="sildeInput1"]{ left: 0; } .slide label[for="sildeInput2"]{ left: 30px; } .slide label[for="sildeInput3"]{ left: 60px; } #sildeInput1:checked ~ ul{ margin-left: 0;} #sildeInput2:checked ~ ul{ margin-left: -600px;} #sildeInput3:checked ~ ul{ margin-left: -1200px;}
<!-- 自动播放 --><div class="slide"> <ul class="slide-auto"> <li>one</li> <li>two</li> <li>three</li> </ul></div><!-- 点击轮播 --><div class="slide"> <input type="radio" name="sildeInput" value="0" id="sildeInput1" checked hidden/> <label for="sildeInput1">1</label> <input type="radio" name="sildeInput" value="1" id="sildeInput2" hidden/> <label for="sildeInput2">2</label> <input type="radio" name="sildeInput" value="1" id="sildeInput3" hidden/> <label for="sildeInput3">3</label> <ul> <li>one-点击切换</li> <li>two-点击切换</li> <li>three-点击切换</li> </ul></div>
<style></style>
- one-点击切换
- two-点击切换
- three-点击切换
css实现的轮播和点击切换(无js版)
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。