CSS to achieve the advertising effect of the carousel map

For the use of CSS to achieve a carousel map reason, is just beginning to contact the front end, completely do not know JS. But there is a project (that is, a work to meet the interview) needs to do a carousel effect, then the first reaction is to use CSS3 Custom animation-webkit-animation. Make out the effect oneself feel also can, the only shortcoming is the mouse clicks to switch banner diagram and assigns to a diagram. If the project does not need to switch to change the picture needs, with CSS3 do, it is not a way. Not much to say, first on the code:

The HTML code is as follows:

<div class= "Test" >
<a href= "#" ></a>
<a href= "#" ></a>
<a href= "#" ></a>
<a href= "#" ></a>
</div>

Then CSS code:

@-webkit-keyframes t1{
0%{left:0;}
20%{left:0;}
25%{left: -960px}
45%{left: -960px}
50%{left: -1920px}
70%{left: -1920px}
75%{left: -2880px}
95%{left: -2880px}
100%{left:0;}
}
@-webkit-keyframes t2{
0%{left:960px;}
20%{left:960px;}
25%{left:0;}
45%{left:0;}
50%{left: -960px}
70%{left: -960px}
75%{left: -1920px}
95%{left: -1920px}
100%{left:960px;}
}
@-webkit-keyframes t3{
0%{left:1920px;}
20%{left:1920px;}
25%{left:960px;}
45%{left:960px;}
50%{left:0;}
70%{left:0;}
75%{left: -960px}
95%{left: -960px}
100%{left:1920px;}
}
@-webkit-keyframes t4{
0%{left:2880px;}
20%{left:2880px;}
25%{left:1920px;}
45%{left:1920px;}
50%{left:960px;}
70%{left:960px;}
75%{left:0;}
95%{left:0;}
100%{left:2880px;}
}

T1, T2, T3, T4 Four animated names are defined here. Mainly in the animation of the setting of the number of frames, because there are only 4 charts, so take each frame number increased by 25% to let the left value minus the width of the picture, and before changing the left value of 5% (this value adjusted according to the situation) leave value is not Change, and this 5% represents the time that the picture moves in the carousel graph, and the other 20% indicates the state of the picture Prohibition. Then put the 4 custom animation one by one into each IMG, for example:

. Test. img1{
left:0;
-WEBKIT-ANIMATION:T1 Linear 12s Infinite;
-MOZ-ANIMATION:T1 Linear 12s Infinite;
-MS-ANIMATION:T1 Linear 12s Infinite;
-O-ANIMATION:T1 Linear 12s Infinite;
ANIMATION:T1 Linear 12s Infinite;
}
. Test. img2{
left:960px;
-WEBKIT-ANIMATION:T2 Linear 12s Infinite;
-MOZ-ANIMATION:T2 Linear 12s Infinite;
-MS-ANIMATION:T2 Linear 12s Infinite;
-O-ANIMATION:T2 Linear 12s Infinite;
ANIMATION:T2 Linear 12s Infinite;
}
. Test. img3{
left:1920px;
-WEBKIT-ANIMATION:T3 Linear 12s Infinite;
-MOZ-ANIMATION:T3 Linear 12s Infinite;
-MS-ANIMATION:T3 Linear 12s Infinite;
-O-ANIMATION:T3 Linear 12s Infinite;
ANIMATION:T3 Linear 12s Infinite;
}
. Test. img4{
left:2880px;
-WEBKIT-ANIMATION:T4 Linear 12s Infinite;
-MOZ-ANIMATION:T4 Linear 12s Infinite;
-MS-ANIMATION:T4 Linear 12s Infinite;
-O-ANIMATION:T4 Linear 12s Infinite;
ANIMATION:T4 Linear 12s Infinite;
}
. Test:hover img{
-webkit-animation-play-state:paused;
-moz-animation-play-state:paused;
-ms-animation-play-state:paused;
-o-animation-play-state:paused;
animation-play-state:paused;
}

The code finally gives a mouse to move up, animation stop effect, the whole carousel time set itself, ' infinite ' said has been continuous carousel.