Il s'agit d'un code d'effets spéciaux basé sur js css pour réaliser un retournement de page de haut en bas des albums photo. L'album peut être basculé dans les directions supérieure et inférieure. Il s'agit d'un code source d'effets spéciaux de diaporama très pratique.
Laissez-moi d'abord vous montrer les rendus :
Démonstration d'effet Téléchargement du code source
Le diaporama jQuery avec le code carrousel de miniatures partagé avec vous est le suivant
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>js+css实现上下翻页相册</title> <link rel="stylesheet" type="text/css" media="screen" href="css/reset.css" /> <link rel="stylesheet" type="text/css" media="screen" href="css/960.css" /> <link rel="stylesheet" type="text/css" media="screen" href="css/main.css" /> <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="js/demo.js"></script> </head> <body> <div class="container_12" id="wrapper"> <div class="grid_8" id="content"><br /><br /><br /><br /><br /><br /><br /> <!-- relevant for the tutorial - start --> <div class="grid_6 prefix_1 suffix_1" id="gallery"> <div id="pictures"> <img src="images/picture1.png" alt="" /> <img src="images/picture2.png" alt="" /> <img src="images/picture3.png" alt="" /> <img src="images/picture4.png" alt="" /> <img src="images/picture5.png" alt="" /> </div> <div class="grid_3 alpha" id="prev"> <a href="#previous">« Previous Picture</a> </div> <div class="grid_3 omega" id="next"> <a href="#next">Next Picture »</a> </div> </div> <!-- relevant for the tutorial - end --> </body> </html>
Ce qui précède est le code CSS js pour implémenter le retournement de page de haut en bas pour tout le monde. J'espère que vous l'aimerez.