效果圖
方法:使用動畫實現功能;鼠標懸停可以實現暫停
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>標題</title>
<link rel="stylesheet" href="../css/reset.css">
<style type="text/css">
/* 幻燈片背景 */
.content{
background: #A1634C; margin: 100px auto;
animation: bj 10s linear infinite;
}
/* 幻燈片盒子,顯示 */
.box{
width: 800px; height: 300px; margin: 0 auto;
overflow: hidden; position: relative;
}
/* 整體幻燈片 */
.box .slide{
width: 400%; height: 100%;
position: absolute; top: 0; left: 0;
animation: slide 10s linear infinite;
}
/* 鼠標懸停幻燈片停止 */
.content:hover, .content:hover .slide{
animation-play-state: paused;
}
/* 轉換a標籤,佈局浮動 */
.box .slide a{
display: block; width: 25%; height: 100%; float: left;
}
/* 設置圖片大小 */
.box .slide img{
width: 100%; height: 100%;
}
/* 幻燈片動畫 */
@keyframes slide {
0%{left: 0%;}
30%{left: 0%;}
33%{left: -100%;}
64%{left: -100%;}
67%{left: -200%;}
95%{left: -200%;}
100%{left: -300%;}
/* 100%{left: -400%;} 這樣寫錯誤,導致超出幻燈片顯示後面空白 */
}
/* 背景顏色:#A1634C #D0D4DA #86572B*/
/* 顏色動畫:要比幻燈片快一點點 */
@keyframes bj {
0%{background: #A1634C;}
29%{background: #A1634C;}
33%{background: #D0D4DA;}
63%{background: #D0D4DA;}
67%{background: #86572B;}
94%{background: #86572B;}
97%{background: #A1634C;}
}
</style>
</head>
<body>
<div class="content">
<div class="box">
<div class="slide">
<a href="#"><img src="../img/img0.jpg"></a>
<a href="#"><img src="../img/img1.jpg"></a>
<a href="#"><img src="../img/img6.jpg"></a>
<!-- 末尾重複第一張圖片,顯得連貫性 -->
<a href="#"><img src="../img/img0.jpg"></a>
</div>
</div>
</div>
</body>
</html>