1、首先我们创建一个简单的项目，如图所示包括html，css和img三个。
2、这里是html文件，引入css和html代码文件，如图所示。
3、这里是css文件代码，上面是div和图片显示的效果代码，后面是动画效果。
4、这里是事件，这里定义了四个时间段的状态，兼容了ie的。
5、如图所示这里是效果图，会根据时间轮播显示下一张图片 了。
h5代码：
<div id=“wrap”><ul id=“list”><li>10</li><li>9</li><li>8</li><li>7</li><li>6</li><li>5</li><li>4</li><li>3</li><li>2</li><li>1</ul></div>
css代码：
<style type="text/css">@-webkit-keyframes move{0%{left:-500px}100%{left:0}}#wrap{width:600pxheight:130pxborder:1px solid #000position:relativemargin:100px autooverflow:
hidden}#list{position:absoluteleft:0top:0padding:0margin:0-webkit-animation:5s move infinite linearwidth:200%}#list li{list-style:nonewidth:120pxheight:130pxborder:1px solid redbackground: pinkcolor:#ffftext-align: centerfloat:leftfont:normal 50px/2.5em '微软雅黑'}#wrap:hover #list{-webkit-animation-play-state:paused}</style>
扩展资料：
轮播图是网站介绍其主要产品或重要信息的一种方式。简单的一点是，在网页的某一部分，会依次呈现几个带有重要信息的图片，这样访问者就可以快速了解网站想要表达的主要信息。各种新闻网站的头版头条也是以这种方式呈现的重要信息。
轮播图的实现方式：例如：有5张轮播的图片，每张图片的宽度为1024px，高度为512px。那么旋转的窗口大小应该是一张图片的大小，即1024×512，然后，将五张0px的图片水平连接，形成一张5120px宽、512px高的图片，最后，通过每次向左移动1024px，可以旋转大的合成图像。
参考资料来源：
百度百科-轮播
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>
如图
