Make a carousel diagram with CSS

For the use of CSS to implement a carousel diagram of the reason, is just beginning to contact the front end, completely still do not understand JS. But there is a project (a work for interviewing) that requires a carousel effect, when the first response is to use CSS3 to customize the animation-webkit-animation. Do out of the effect of their own think can also, the only problem is the mouse click to toggle banner Diagram and assign to a graph. If the project does not need to switch the needs of the picture, with CSS3 do, it is not a way. Not much to say, first on the code:

The HTML code is as follows:

<Divclass= "Test">    <ahref="#" ><imgclass= "IMG1"src= "1.jpg" ></a>    <ahref="#" ><imgclass= ' Img2 'src= "2.jpg" ></a>    <ahref="#" ><imgclass= ' IMG3 'src= "3.jpg" ></a>    <ahref="#" ><imgclass= ' Img4 'src= "4.jpg" ></a></Div>

Then the 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; }}

Here defines the T1, T2, T3, T4 Four animation names, mainly in the animation frame number of the setting technique, because there are only 4 pictures, so the number of frames to increase 25% each time the left value minus the width of the picture, and before the change in the value of the 5% (this value is adjusted according to the situation) The value remains the same , and this 5% represents the time the picture is moved in the carousel, and the other 20% represents the state of the picture being banned. Then put these 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, the effect of the animation stop, the entire carousel time to set itself, ' infinite ' means to continue the carousel.

PS: This is a positive sequence of the carousel, the same can be achieved in reverse-order rotation, in the definition of animation to change the number of frames set on the line, there is doubt, welcome in the comments, thank you.

Make a carousel diagram with CSS