一个完整的网站是由多个网页组成的,下面我来介绍下网页当中最基本的一种功能——轮播图:,接下来我们就来聊聊关于网站轮播图代码在哪里?以下内容大家不妨参考一二希望能帮到您!
网站轮播图代码在哪里
一个完整的网站是由多个网页组成的,下面我来介绍下网页当中最基本的一种功能——轮播图:
下面先看看基本的代码
<!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>简易网站轮播图</title>
<style>
.container{
width: 100%;
position: relative;
}
.container div{
width: 100%;
position: absolute;
opacity: 0;
}
div.show{
opacity: 1;
}
.container img{
width: 100%;
border-radius: 10%;
}
</style>
</head>
<body>
<div class="container" id="slider">
<div class="show"><img src="./img/lunbo/01.jpg" alt="" srcset=""></div>
<div><img src="./img/lunbo/02.jpg" alt="" srcset=""></div>
<div><img src="./img/lunbo/03.jpg" alt="" srcset=""></div>
<div><img src="./img/lunbo/04.jpg" alt="" srcset=""></div>
</div>
<script>
function task(){
var show=document.querySelector("#slider>div.show");
show.className="";
if(show.nextElementSibling!==null)
show.nextElementSibling.className="show";
else
show.parentNode.children[0].className="show";
}
setInterval(task,1000)
</script>
</body>
</html>
大家看到这些代码是不是头疼呢?这个代码实现的效果请看 相关视频
同时希望大家给我的视频点点赞和关注,以后将继续发布一些程序类的视频供大家一起学习进步!
,