<!DOCTYPE html>
<html lang="en">
<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">
<title>Document</title>
<style>
#temp {
overflow: auto;
}
* {
margin: 0;
padding: 0;
list-style: none;
}
.JQ-content-box {
width: 300px;
height: 25px;
min-height: 25px;
line-height: 25px;
overflow: hidden;
background: salmon;
}
.JQ-slide-content li {
height: 25px;
}
</style>
</head>
<body>
<div id="temp">
<div class="JQ-content-box">
<ul class="JQ-slide-content">
<li>这是公告标题的第四行</li>
<li>这是公告标题的第五行</li>
<li>这是公告标题的第六行</li>
<li>这是公告标题的第七行</li>
<li>这是公告标题的第八行</li>
<li>这是公告标题的第9行</li>
<li>这是公告标题的第10行</li>
<li>这是公告标题的第11行</li>
<li>这是公告标题的第12行</li>
<li>这是公告标题的第一行</li>
<li>这是公告标题的第二行</li>
<li>这是公告标题的第三行</li>
</ul>
</div>
</div>
<script src="./jquery-1.12.4.min.js"></script>
<script src="./jq.Slide.js"></script>
<script>
$("#temp").Slide({
effect: "scroolTxt",
speed: "normal",
timer: 2000,
steps: 1
});
</script>
</body>
</html>
04-18
12-01
140
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
10-08