效果图
效果图
设计思路：
用ul显示内部上滑标题，并在其外部添加一个div作为容器，然后使用JQuery的动画效果，使ul的top属性不断改变来实现上滑的效果。
代码展示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--引入JQuery-->
<script type="text/javascript" src="libs/jquery.min.js" ></script>
<title>上滑标题</title>
<style>
*{
padding: 0;
margin: 0;
}
html,body{
width: 100%;
height: 100%;
}
#border{
width: 300px;
height: 30px;
/*设置居中显示*/
margin: 0 auto;
position: relative;
top: 20%;
/*添加边框*/
border: 2px black solid;
/*隐藏内部超出部分*/
overflow: hidden;
}
#border ul{
position: absolute;
/*去除列表样式*/
list-style: none;
top: 0px;
}
#border ul li{
width: 300px;
text-align: center;
line-height: 30px;
}
</style>
</head>
<body>
<div id="border">
<ul>
<li>猎豹3.21机器人之夜</li>
<li>日启动试验性焚烧</li>
<li>医生绘图解释病情</li>
<li>拒绝求爱遭泼硫酸</li>
<!--这里添加与第一条重复的数据目的是为了使轮播看起来有连续性-->
<li>猎豹3.21机器人之夜</li>
</ul>
</div>
</body>
<script>
$(function(){
//定义变量c
var c=0;
//设置定时函数使得每隔1秒钟时间就滑动一次
setInterval(function(){
//通过改变c的值来改变显示的标题
c++;
//当滑到最后一个的时候将ul的位置直接跳到第一，来实现持续性轮播的效果
if(c===5){
$("#border ul").css({"top":"0px"});
c=1;
}
var t=c*-30;
$("#border ul").animate({"top":t+"px"});
},1000);
});
</script>
</html>
