<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
img {
display: none;
width: 100px;
height: 100px;
}
input:checked + img {
display: block;
}
input {
position: absolute;
left: -9999px;
}
label {
cursor: pointer;
}
</style>
</head>
<body>
<div id="cont">
<input id="img1" name="img" type="radio" checked="checked">
<img src="1.jpg" width="100" height="100">
<input type="radio" name="img" id="img2">
<img src="2.jpg" width="100" height="100">
</div>
<div id="nav">
<label for="img1">第一張</label>
<label for="img2">第二張</label>
</div>
</body>
</html>
<!--兼容性： IE8以及IE8以下的瀏覽器不兼容，只顯示文字，不顯示圖片--> <!--以上代碼實現使用到的技術： 除了設置相應的CSS樣式，有兩點值得注意： 1.設置按鈕的位置(絕對定位) ，left:-9999px用來隱藏按鈕； 2.<label>標籤中的for屬性與input標籤中的id關聯，然後根據input的checked的狀態顯示或隱藏圖片，來達到顯示幻燈片效果的目的。 -->
2、第二種方法
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>css3 實現幻燈片效果</title>
<style type="text/css">
.huanDengPic {
width: 600px;
height: 600px;
margin: 50px auto 0;
overflow: hidden;
box-shadow: 0 0 5px rgba(0,0,0,1); /*CSS3 box-shadow屬性,裏面的值的設置s可以去網上查*/
background-size: cover;
background-position: center;
-webkit-animation-name: "loops"; /*檢索或設置對象所應用的動畫名稱*/
-webkit-animation-duration: 10s; /*檢索或設置對象動畫的持續時間*/
-webkit-animation-iteration-count: infinite; /*檢索或設置對象動畫的循環次數，此處的"infinite"爲無限循環的意思*/
}
@-webkit-keyframes "loops" { /*動畫名稱和上面設置的動畫名稱一樣*/
/*下面是動畫過程*/
0% {
background: url(1.jpg) no-repeat;
}
50% {
background: url(2.jpg) no-repeat;
}
100% {
background: url(3.jpg) no-repeat;
}
}
</style>
</head>
<body>
<div class="huanDengPic"></div>
</body>
</html>