- <! DOCTYPE HTML>
- <html>
- <head>
- <title> Fly skynet-pure CSS Code implementation picture Carousel </title>
- <meta charset="utf-8" />
- <meta name="description" content= "fly skynet, Web front-end development, pure CSS3 code picture carousel, html5+css3 wonderful case" />
- <meta name="keywords" content="fly skynet, Web front-end development, html5,css3,jquery," />
- <meta name= "author" content="r.tian @eduppp. cn">
- <link rel="shortcut icon" href="http://eduppp.cn/images/logo4.gif" /> /c12>
- <link rel= "apple-touch-icon" href="http://eduppp.cn/images/logo.gif" />
- <style type="text/css">
- #frame {/*----------picture Carousel Frame container----------*/
- position:absolute; /*--absolute positioning, Convenient sub-element positioning */
- width:300px;
- height:200px;
- Overflow:hidden;/*--photo frame, Show Only one picture---*/
- border-radius:5px;
- }
- #dis {/*--absolute Positioning Convenient Li picture introduction of the automatic distribution positioning---*/
- position:absolute;
- Left: -50px;
- Top: -10px;
- opacity:0.5;
- }
- #dis Li {
- display:inline-block;
- width:200px;
- height:20px;
- margin:0 50px;
- float:left;
- text-align:center;
- Color: #fff;
- border-radius:10px;
- Background: #000;
- }
- #photos img {
- float:left;
- width:300px;
- height:200px;
- }
- #photos {/*---sets The overall picture width--by displacement to achieve the carousel effect----*/
- position:absolute;z-index:9px;
- Width:calc (300px * 5);/*---modify The number of pictures, you need to modify the following animation parameters */
- }
- . play{
- Animation:ma 20s Ease-out Infinite alternate;/**/
- }
- @keyframes Ma {/*---there are two stages for each picture switch: displacement toggle and Static. The intermediate effect can be arbitrarily customized----*/
- 0%,20% {margin-left:0px; }
- 25%,40% {margin-left: -300px; }
- 45%,60% {margin-left: -600px; }
- 65%,80% {margin-left: -900px; }
- 85%,100% {margin-left: -1200px; }
- }
- . num{
- position:absolute;z-index:10;
- display:inline-block;
- right:10px;top:165px;
- border-radius:100%;
- Background: #f00;
- width:25px;height:25px;
- line-height:25px;
- cursor:pointer;
- Color: #fff;
- text-align:center;
- opacity:0.8;
- }
- . num:hover{background: #00f;}
- . num:hover, #photos: hover{animation-play-state:paused;}
- . Num:nth-child (2) {margin-right:30px}
- . Num:nth-child (3) {margin-right:60px}
- . Num:nth-child (4) {margin-right:90px}
- . Num:nth-child (5) {margin-right:120px}
- #a1: Hover ~ #photos {animation:ma1.5s ease-out forwards;}
- #a2: Hover ~ #photos {animation:ma2.5s ease-out forwards;}
- #a3: Hover ~ #photos {animation:ma3.5s ease-out forwards;}
- #a4: Hover ~ #photos {animation:ma4.5s ease-out forwards;}
- #a5: Hover ~ #photos {animation:ma5.5s ease-out forwards;}
- @keyframes MA1 {0%{margin-left:-1200px;} 100%{margin-left:-0px;}}
- @keyframes Ma2 {0%{margin-left:-1200px;} 100%{margin-left:-300px;} }
- @keyframes MA3 {100%{margin-left:-600px;} }
- @keyframes MA4 {100%{margin-left:-900px;} }
- @keyframes MA5 {100%{margin-left:-1200px;} }
- </style>
- </head>
- <body>
- <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>
- <a id="a5" class="num">5</a>
- <div id="photos" class="play">
- <img src="http://eduppp.cn/images/0/1.jpg" >
- <img src="http://eduppp.cn/images/0/3.jpg" >
- <img src="http://eduppp.cn/images/0/4.jpg" >
- <img src="http://eduppp.cn/images/0/5.jpg" >
- <img src="http://eduppp.cn/images/0/2.jpg" >
- <ul id="dis">
- <li> China iconic building: Tiananmen </li>
- <li> China iconic building: Oriental Pearl </li>
- <Li> Chinese iconic architecture: Potala Palace </li>
- <li> China iconic building: Great Wall </li>
- <Li> Chinese iconic building: Temple of Heaven </li>
- </ul>
- </div>
- </div>
- </body>
- </html>
"reference address: http://blog.csdn.net/rtian001/article/details/48474677"
Use pure CSS3 to achieve picture carousel
