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>