CSS3 implements simple carousel images and css3 carousel Images

CSS3 implements simple carousel images and css3 carousel Images

The principle is to change the left value when CSS 3 is used to implement image switching. Only the simplest automatic playback function is available. After switching, the system remains static for a short time. The first image is cloned at the last position to achieve seamless switching.

Html Structure

<Div id = "container"> <ul class = "pic"> <li> <a href = "javascript :; ">  </a> </li> <a href =" javascript :; ">  </a> </li> <a href =" javascript :; ">  </a> </li> <a href =" javascript :; ">  </a> </li> <! -- Clone the first image --> </ul> </div>

Css style

* {Margin: 0; padding: 0; text-decoration: none;} ul {list-style: none ;}# container {position: relative; width: 400px; height: 200px; overflow: hidden;/* Hide the overflow image */}. pic {width: 1600px;/* width of the four graphs */position: absolute;/* Positioning Based on the parent container */left: 0; animation-name: focusmap; animation-duration: 12 s; animation-iteration-count: infinite; // animation call can be abbreviated as} @ keyframes focusmap {0%, 30% {left: 0;} 35%, 65% {left:-400px;} 70%, 99% {left:-800px;} 100% {left:-0000px ;}}. pic li {float: left; background: # 5dd94e ;}. pic li img {width: 400px; height: 200px ;}