使用 html+css布局
在这里插入代码片
<html>
<head>
<meta charset="UTF-8">
<meta name="keywords" content="">
<meta name="=Description" content="">
<title>轮播</title>
<style>
*{margin: 0px;padding: 0px;}
#wrap{
width: 500px;
height: 300px;
background-color: aqua;
margin: 100px auto;
overflow: hidden;
}
#list{
width:120000000px;
list-style: none;
translate: 1s;/*过度*/
}
#list li{
float: left;
width: 500px;
height: 300px;
}
img{
width: 100%;
height: 100%;
}
input[type="radio"]{
display: none;/*t隐藏radio*/
}
/*当rad2被选中 list移动*/
#rad2:checked~#list{
transform: translateX(-500px)/*css3 变换*/
}
#rad3:checked~#list{
transform: translateX(-1000px)/*css3 变换*/
}
#rad4:checked~#list{
transform: translateX(-1500px)/*css3 变换*/
}
#rad5:checked~#list{
transform: translateX(-2000px)/*css3 变换*/
}
#rad6:checked~#list{
transform: translateX(-2500px)/*css3 变换*/
}
#rad7:checked~#list{
transform: translateX(-3000px)/*css3 变换*/
}
#btn{
position: absolute;
margin-top: 250px;
margin-left: 250px;
transform:translateX(-50%);
}
#btn label{
float: left;
margin-left:5px;
width: 30px;
height: 10px;
background-color:#fff;
}
#btn label:hover{
background-color: #ff0066;
}
</style>
</head>
<body>
<div id="wrap">
<input type="radio" name="rad" id="rad1">
<input type="radio" name="rad" id="rad2">
<input type="radio" name="rad" id="rad3">
<input type="radio" name="rad" id="rad4">
<input type="radio" name="rad" id="rad5">
<input type="radio" name="rad" id="rad6">
<input type="radio" name="rad" id="rad7">
<!-- li中放入图片-->
<ul id="list">
<li>[外链图片转存失败(img-ETP6TQPO-1562143340572)(https://mp.csdn.net/mdeditor/image/1.jpg)]</li>
<li>[外链图片转存失败(img-cGQ0SRiC-1562143340574)(https://mp.csdn.net/mdeditor/image/2.jpg)]</li>
<li>[外链图片转存失败(img-D1npDQ5o-1562143340575)(https://mp.csdn.net/mdeditor/image/3.jpg)]</li>
<li>[外链图片转存失败(img-T047rWus-1562143340580)(https://mp.csdn.net/mdeditor/image/4.jpg)]</li>
<li>[外链图片转存失败(img-oJa6wr3V-1562143340582)(https://mp.csdn.net/mdeditor/image/5.jpg)]</li>
<li>[外链图片转存失败(img-MEPnIk5M-1562143340583)(https://mp.csdn.net/mdeditor/image/6.jpg)]</li>
<li>[外链图片转存失败(img-ehjQd82i-1562143340583)(https://mp.csdn.net/mdeditor/image/7.jpg)]</li>
</ul>
<div id="btn">
<label for="rad1"></label>
<label for="rad2"></label>
<label for="rad3"></label>
<label for="rad4"></label>
<label for="rad5"></label>
<label for="rad6"></label>
<label for="rad7"></label>
</div>
</div>
</body>
</html>