題外話：因為沒有轉正，一天只能發一篇文章，說CSS3就沒法說javascript了，對不起各位觀眾咯。

進入正題，在昨天的基礎上，對CSS3實現圖片輪播效果進行了進一步完善。限於篇幅，只講設計思路，完整代碼和圖片請留言。

網上轉載的圖片，應該不算侵權吧？O(∩_∩)O哈哈~

設計思路

1、分析上圖，主要包括兩塊內容：顯示圖片的框框和幾個<a>鏈接。二話不說，先把它敲出來。

<div id="frame">

<a id="a1" class="num">1</a>

<a id="a2" class="num">2</a>

<a id="a3" class="num">3</a>

<a id="a4" class="num">4</a>

<div id="photos" class="play">

<img src="./images/fj1.jpg" alt="">

<img src="./images/fj2.jpg" alt="">

<img src="./images/fj3.jpg" alt="">

<img src="./images/fj4.jpg" alt="">

</div>

</div>

2、給元素加上必要的樣式

*{margin:0; padding: 0;}

body{background: #f8584f;}

#frame{width:500px; height:313px; margin:80px auto;position: relative; overflow: hidden;}

#photos img{

width:500px; height:313px; float: left;

}

#photos{

position: absolute;

width:calc(500px * 4);

z-index: 9;

}

.num{

position: absolute;

display: inline-block;

z-index: 10;

right:10px;

top: 273px;

border-radius: 100%;

background: #f00;

width:35px;

height:35px;

line-height: 35px;

cursor:pointer;

color:#fff;

text-align: center;

opacity: 0.7;

}

.num:hover{background: #00f;}

3、設計動畫規則

@keyframes move{

0%, 25%{margin-left:0px;}

25%, 50%{margin-left:-500px;}

50%, 75%{margin-left:-1000px;}

75%, 100%{margin-left:-1500px;}

}

@keyframes move1{

0%{margin-left: -1500px;}

100%{margin-left: -0px;}

}

@keyframes move2{

0%{margin-left: -1500px;}

100%{margin-left: -500px;}

}

@keyframes move3{

100%{margin-left: -1000px;}

}

@keyframes move4{

100%{margin-left: -1500px}

}

4、給不同的元素綁定不同的動畫規則

.play{

animation:move 20s ease infinite alternate;

-webkit-animation:move 20s ease infinite alternate;

-o-animation:move 20s ease infinite alternate;

-moz-animation:move 20s ease infinite alternate;

}

.num:hover,#photos:hover{animation-play-state: paused;}

.num:nth-child(2){margin-right: 45px;}

.num:nth-child(3){margin-right: 90px;}

.num:nth-child(4){margin-right: 135px;}

.num:nth-child(5){margin-right: 180px;}

#a1:hover ~ #photos{animation: move1 .5s ease-out forwards;}

#a2:hover ~ #photos{animation: move2 .5s ease-out forwards;}

#a3:hover ~ #photos{animation: move3 .5s ease-out forwards;}

#a4:hover ~ #photos{animation: move4 .5s ease-out forwards;}

這裡邊設計到許多CSS3的知識，大家可以去w3school上邊好好揣摩一下，我也就不再累贅咯。還是那句老話，只有自己敲出來的代碼才是你自己的。