1、在html编辑器软件内，新建html页面，（一般我们常使用的两款编辑器是HBuilder和Adobe Dreamweaver，这里我使用的软件是HBuilder）。
2、在<body></body>添加<div class="nav"></div>,于<div class="nav"></div>中间添加<ul></ul>,在<ul>内添加<li>标签，<li>内同时添加<a>标签，方便连接导航跳转。
3、在新建的<a></a>内，添加横向导航要显示的内容。
4、在<title></title>下方添加一个<style type="text/css"></style>。
5、源文件html保存后，使用浏览器打开预览效果。
只是CSS可能整出来的不好啊，还是要加上js才更好。但是这个也可以，CSS的。div {
border: 1px solid red
width: 500px
height: 280px
/*background-image:url(..//pic/newimages/1.png)*/
position: relative
animation: firstone 10s infinite
animation-direction: alternate
-webkit-animation: firstone 10s infinite
-webkit-animation-direction: alternate
}
@keyframes firstone {
0% {
background-image: url(..//pic/newimages/1.png)
left: 20px
top: 0
}
25% {
background-image: url(..//pic/newimages/8.jpg)
left: 280px
top: 0
}
50% {
background-image: url(..//pic/newimages/7.jpg)
left: 280px
top: 280px
}
75% {
background-image: url(..//pic/newimages/15.jpg)
left: 20px
top: 280px
}
20% {
background-image: url(..//pic/newimages/19.jpg)
left: 20px
top: 0
}
}
@-webkit-keyframes firstone {
0% {
background-image: url(..//pic/newimages/2.png)
left: 0
top: 0
}
25% {
background-image: url(..//pic/newimages/8.jpg)
left: 280px
top: 0
}
50% {
background-image: url(..//pic/newimages/7.jpg)
left: 280px
top: 280px
}
75% {
background-image: url(..//pic/newimages/15.jpg)
left: 0
top: 280px
}
20% {
background-image: url(..//pic/newimages/19.jpg)
left: 0
top: 0
}
}
里面写一个空的div就可以了，放图片就是自己放吧。
