文字轮播效果

最新推荐文章于 2023-06-14 18:10:41 发布

闪现A小兵

最新推荐文章于 2023-06-14 18:10:41 发布

阅读量963

点赞数

分类专栏： js常见效果图文章标签： web前端文字轮播延迟轮播

本文链接：https://blog.csdn.net/moguzhale/article/details/53212757

版权

js常见效果图专栏收录该内容

4 篇文章 0 订阅

订阅专栏

这里是前几天做的一个文字轮播效果图，分为两块，第一块就是单纯的文字轮播效果，鼠标划过会停止，鼠标移开会继续。第二块是一个延迟的文字轮播效果，就是每隔一段时间，会播一次。因为第一块里面已经做了鼠标悬停事件，所以在第二块里面就不再做了。这大概算是我的第一篇小白文了吧，写的不好，哈哈，也欢迎各位看到我代码的小伙伴能够给出意见，或者对我代码里面有疑惑的地方也可以指出。

<!DOCTYPE html>
<html>
<head>
<title>文字向上滚动</title>
<meta cjarset="UTF-8" />
<style>
ul,li,h2{
margin: 0;
padding: 0;
}
#div1{
width: 200px;
margin: 100px auto;
border: 1px solid #f00;
}
#div2{
height: 150px;
width: 200px;
background: green;
overflow: hidden;
}
h2{
background:#f0f;
}
h2,li{
text-align: center;
}
li{
list-style-type:none;
}

</style>
</head>
<body>
<div id="div1">
<h2>英雄简介</h2>
<div id="div2">
<ul>
<li>酒桶</li>
<li>阿卡里</li>
<li>虚空行者</li>
<li>末日使者</li>
<li>圣枪游侠</li>
<li>亚索</li>
<li>死哥</li>
<li>德玛西亚</li>
<li>茂凯</li>
<li>莫甘娜</li>
<li>小炮</li>
</ul>
</div>
</div>
<script>
var div2=document.getElementById("div2");
div2.innerHTML+=div2.innerHTML;
var lis=document.getElementsByTagName("li"),
time,
speed=50;
div2.scrollTop=0;

function move(){
div2.scrollTop++;
if(div2.scrollTop>=div2.scrollHeight/2){
div2.scrollTop=0;
}
}
time=setInterval("move()",speed)
for(var i=0;i<lis.length;i++){
lis[i].οnmοuseοver=function(){
this.style.background="#567";
clearInterval(time);
}
lis[i].οnmοuseοut=function(){
this.style.background="green";
time=setInterval("move()",speed)
}
}

</script>
</body>

</html>

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------我是分割线

<!DOCTYPE html>
<html>
<head>
<title>文字向上滚动</title>
<meta cjarset="UTF-8" />
<style>
ul,li,h2{
margin: 0;
padding: 0;
}
#div1{
width: 200px;
margin: 100px auto;
border: 1px solid #f00;
}
#div2{
height: 150px;
width: 200px;
background: green;
overflow: hidden;
}
h2{
background:#f0f;
}
h2,li{
text-align: center;
}
li{
list-style-type:none;
line-height: 24px;
}

</style>
</head>
<body>
<div id="div1">
<h2>英雄简介</h2>
<div id="div2">
<ul>
<li>酒桶</li>
<li>阿卡里</li>
<li>虚空行者</li>
<li>末日使者</li>
<li>圣枪游侠</li>
<li>亚索</li>
<li>死哥</li>
<li>德玛西亚</li>
<li>茂凯</li>
<li>莫甘娜</li>
<li>小炮</li>
</ul>
</div>
</div>
<script>
var div2=document.getElementById("div2");
div2.innerHTML+=div2.innerHTML;
var time,
speed=50,
delay=1000,
liHeight=24;
div2.scrollTop=0;
function movego(){
div2.scrollTop++;
time=setInterval("move()",speed);
}

function move(){
if(div2.scrollTop%liHeight==0){
clearInterval(time);
setTimeout("movego()",delay);
}else{
div2.scrollTop++;
if(div2.scrollTop>=div2.scrollHeight/2){
div2.scrollTop=0;
}
}
}
time=setInterval("move()",speed);

</script>
</body>

</html>