【小实战】——轮播图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding : 0;
}
body {
position: relative;
}
.nav_con {
width: 100%;
height: 120px;
background: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0));
z-index: 10;
position: absolute;
top: 0;
left: 0;
}
.nav {
width: 100%;
height: 60px;
padding: 30px 0;
overflow: hidden;
z-index: 100;
}
.nav .logo {
width: 180px;
height: 60px;
margin-left: 80px;
}
.list_body {
width: 100%;
height: auto;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
z-index: 1;
}
.banner {
width: 100%;
height: 700px;
position: relative;
}
.banner >div {
width: 100%;
height: 700px;
position: absolute;
top: 0;
left: 0;
display: none;
background-size: cover;
}
.block{
display: block !important;
}
</style>
</head>
<body>
<div class="nav_con">
<div class="nav">
<div class="logo">
<img src="https://img.alicdn.com/tfs/TB17DTuXkH0gK0jSZPiXXavapXa-680-133.svg" >
</div>
</div>
</div>
<div class="list_body">
<div class="banner">
<div class="banner_img block" style="background-image: url(https://liangcang-material.alicdn.com/feupload/488y5hkuq0qeadxqzey1578701418081.jpg?x-oss-process=image/resize,w_2074/interlace,1/quality,Q_80/sharpen,100);"></div>
<div class="banner_img" style="background-image: url(https://liangcang-material.alicdn.com/prod/upload/4a29d6826fc74fba8e3eca530232c6e3.jpg?x-oss-process=image/resize,w_2074/interlace,1/quality,Q_80/sharpen,100);"></div>
<div class="banner_img" style="background-image: url(https://ykimg.alicdn.com/develop/image/2020-01-11/ba80eada193b982afaae36c9fe6b569b.jpg?x-oss-process=image/resize,w_2074/interlace,1/quality,Q_80/sharpen,100);"></div>
<div class="banner_img" style="background-image: url(https://liangcang-material.alicdn.com/prod/upload/e442fb7d33f946c1ac7947883a204f81.jpg?x-oss-process=image/resize,w_2074/interlace,1/quality,Q_80/sharpen,100);"></div>
<div class="banner_img" style="background-image: url(https://liangcang-material.alicdn.com/prod/upload/b07b12722e9b4783a08983c3e1b42955.jpg?x-oss-process=image/resize,w_2074/interlace,1/quality,Q_80/sharpen,100);"></div>
<div class="banner_img" style="background-image: url(https://liangcang-material.alicdn.com/prod/upload/798bb83c58a54f3fbc10eb7932249ae1.jpg?x-oss-process=image/resize,w_2074/interlace,1/quality,Q_80/sharpen,100);"></div>
</div>
<div class="style_list">
</div>
</div>
<script type="text/javascript">
var banner = document.getElementsByClassName('banner_img'),
len = banner.length,
i = 0;
setInterval(function () {
banner[i].className = 'banner_img';
if(i == len-1){
i = -1;
banner[i+1].className += ' block';
} else {
banner[i+1].className += ' block';
}
i ++;
}, 3000);
</script>
</body>
</html>
