怎么用html5+css3 实现图片轮播

1、首先我们创建一个简单的项目，如图所示包括html，css和img三个。

2、这里是html文件，引入css和html代码文件，如图所示。

3、这里是css文件代码，上面是div和图片显示的效果代码，后面是动画效果。

4、这里是事件，这里定义了四个时间段的状态，兼容了ie的。

5、如图所示这里是效果图，会根据时间轮播显示下一张图片 了。

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>

如图

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</li>

</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 auto

overflow: 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: pink

color:#ffftext-align: centerfloat:leftfont:normal 50px/2.5em '微软雅黑'}

#wrap:hover #list{-webkit-animation-play-state:paused}

</style>

扩展资料：

轮播图就是一种网站在介绍自己的主打产品或重要信息的传播方式。说的简单点就是将承载着重要信息的几张图片，在网页的某一部位进行轮流的呈现，从而做到让浏览者很快的了解到网站想要表达的主要信息。以及各种新闻网站的头版头条都是用这种方式呈现的重要信息。

轮播图的实现方式：例如：有5张轮播的图片，每张图片的宽度为1024px、高度为512px.那么轮播的窗口大小就应该为一张图片的尺寸，即为：1024×512。之后将这5张图片0px水平相接组成一张宽度为：5120px,高度依然为：512px。最后将这张合成后的大图每次向左移动1024px即可实现轮播图。

---