Make a carousel diagram with CSS

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.