欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!

 

<!DOCTYPE html>

<html lang="en" class="no-js">

         <head>

                   <meta charset="UTF-8" />

                   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

                   <meta name="viewport" content="width=device-width, initial-scale=1.0">

                   <title>Flipping Circle Slideshow</title>

                   <meta name="description" content="Flipping Circle Slideshow" />

                   <meta name="keywords" content="flipping, circle, round, jquery plugin, circular, slideshow, 3d, css 3d transforms" />

                   <meta name="author" content="Codrops" />

                   <link rel="shortcut icon" href="../favicon.ico">

                   <link rel="stylesheet" type="text/css" href="css/default.css" />

                   <link rel="stylesheet" type="text/css" href="css/component.css" />

                   <script src="js/modernizr.custom.js"></script>

         </head>

         <body>

                   <div class="container"> 

                            <!-- Codrops top bar -->

                            <div class="codrops-top clearfix">

                                     <a href="http://tympanus.net/Tutorials/ExpandingOverlayEffect/"><strong>&laquo; Previous Demo: </strong>Expanding Overlay Effect</a>

                                     <span class="right"><a href="http://cargocollective.com/isaac317">Illustrations by Isaac Montemayor</a><a href="http://tympanus.net/codrops/?p=13951"><strong>Back to the Codrops Article</strong></a></span>

                            </div><!--/ Codrops top bar -->

                            <header class="clearfix">

                                     <h1>Flipping Circle Slideshow <span>Click and navigate</span></h1>

                            </header>

                            <div class="main">

                                     <div id="fc-slideshow" class="fc-slideshow">

                                               <ul class="fc-slides">

                                                        <li><img src="images/1.jpg" /><h3>Hot</h3></li>

                                                        <li><img src="images/2.jpg" /><h3>Cold</h3></li>

                                                        <li><img src="images/3.jpg" /><h3>Light</h3></li>

                                                        <li><img src="images/4.jpg" /><h3>Dark</h3></li>

                                                        <li><img src="images/5.jpg" /><h3>Soft</h3></li>

                                                        <li><img src="images/6.jpg" /><h3>Hard</h3></li>

                                                        <li><img src="images/7.jpg" /><h3>Smooth</h3></li>

                                                        <li><img src="images/8.jpg" /><h3>Rough</h3></li>

                                               </ul>

                                     </div>

                            </div>

                   </div><!-- /container -->

                   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

                   <script src="js/jquery.flipshow.js"></script>

                   <script>

                            $( function() {

                                    

                                     $( '#fc-slideshow' ).flipshow();

 

                            } );

                   </script>

         </body>

</html>

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html5/h15827.shtml