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>标题⽂字轮播</title>
<style>
*{
padding: 0px;
margin: 0px;
}
.display{
height: 30px;
position: relative;
/* 溢出的元素隐藏 */
overflow: hidden;
}
p{
js实现轮播图最简代码line-height: 30px;
position: absolute;
/* 默认p元素都在div下⾯ */
top: 30px;
}
/* 先定义两个class ：show刚好显⽰在div中间；up跑到div上⾯*/
.show{top: 0px;transition: 1s top ease-out;}
.up{top: -30px;transition: 1s top ease-out;}
/
* 给每个p元素设置不同的颜⾊ */
p:nth-child(1){color: fuchsia;}
p:nth-child(2){color: lightgreen;}
p:nth-child(3){color: blueviolet;}
p:nth-child(4){color: limegreen;}
</style>
</head>
<body>
<div class="display">
<p class="show">这是⼀个标题⽂字轮播效果</p>
<p>使⽤到简单的javascript</p>
<p>你觉得不错的话可以可以看看我的主页</p>
<p class="end">最后别忘了点赞哦</p>
</div>
<script>
//每2.5秒执⾏⼀次下⾯的代码
setInterval(function(){
//获取class为show的p标签
let show = document.querySelector('p.show');
//获取show的下⼀个p标签，如果show是最后⼀个标签，则获取第⼀个p标签
let next = ElementSibling || document.querySelector('p:first-child');
//获取class为 up的p标签
let up = document.querySelector('p.up');
//当移除class为show的p标签的class
ve('show');
//然后给它添加值为：up的class，
show.classList.add('up');
//给下⼀个标题他添加值为：show的class
next.classList.add('show');
//如果有那个有带有up，则移除他的up，
if(up){
ve('up');
}
},2500)
</script>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。