用<marquee/>标签实现，html代码示例如下
<html><head>
<title>文字滚动示例</title>
</head>
<body>
<div>
水平滚动：
<marquee direction="left" align="bottom" height="25" width="100%" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="2" scrolldelay="1">水平滚动字幕内容</marquee>
</div>
<div>
垂直滚动：
<marquee direction="up" height="200" onmouseout="this.start()" onmouseover="this.stop()" scrollAmount="1" scrollDelay="1">垂直滚动字内容</marquee>
</div>
</body>
</html>
<script>window.onload = function(){ //页面加载完成执行
var images = document.getElementsByTagName('img')//取得所有img图片
var pos = 0//定义pos变量初始值=0
var len = images.length//取得图片个数
setInterval(function(){//定每1秒时执行
images[pos].style.display = 'none'//第一个图片隐藏,
pos = ++pos == len ? 0 : pos//pos在图片个数范围内递增
images[pos].style.display = 'inline'//下一个图片显示
},1000)
}
</script>
html部分
<div id="container"><div class="sections">
<div class="section" id="section0"><h3>this is the page1</h3></div>
<div class="section" id="section1"><h3>this is the page2</h3></div>
<div class="section" id="section2"><h3>this is the page3</h3></div>
<div class="section" id="section3"><h3>this is the page4</h3></div>
</div>
</div>
css部分
*{padding: 0
margin: 0
}
html,body{
height: 100%
}
#container {
width: 100%
height: 500px
overflow: hidden
}
.sections,.section {
height:100%
}
#container,.sections {
position: relative
}
.section {
background-color: #000
background-size: cover
background-position: 50% 50%
text-align: center
color: white
}
#section0 {
background-image: url('images/1.jpg')
}
#section1 {
background-image: url('images/2.jpg')
}
#section2 {
background-image: url('images/3.jpg')
}
#section3 {
background-image: url('images/4.jpg')
}
.pages li{list-style-type:nonewidth:10pxheight:10pxborder-radius:10pxbackground-color:white}.pages li:hover{box-shadow:0 0 5px 2px white}.pages li.active{background-color:orangebox-shadow:0 0 5px 2px orange}.pages{position:absolutez-index:999}.pages.horizontal{left:50%transform:translateX(-50%)bottom:5px}.pages.horizontal li{display:inline-blockmargin-right:10px}.pages.horizontal li:last-child{margin-right:0}.pages.vertical{right:5pxtop:50%transform:translateY(-50%)}.pages.vertical li{margin-bottom:10px}.pages.vertical li:last-child{margin-bottom:0}
JS部分
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>//引入pageSwitch.min.js
<script>
$("#container").PageSwitch({
direction:'horizontal',
easing:'ease-in',
duration:1000,
autoPlay:true,
loop:'false'
})
</script>
如图
