Heim > Web-Frontend > js-Tutorial > js CSS, um das Auf- und Abblättern von Albumcode-Sharing_Javascript-Kenntnissen zu realisieren

js CSS, um das Auf- und Abblättern von Albumcode-Sharing_Javascript-Kenntnissen zu realisieren

WBOY
Freigeben: 2016-05-16 15:44:34
Original
1216 Leute haben es durchsucht

Dies ist ein Spezialeffektcode, der auf js CSS basiert, um das Umblättern von Fotoalben nach oben und unten zu ermöglichen. Es handelt sich um einen sehr praktischen Quellcode für Diashow-Spezialeffekte.
Lassen Sie mich Ihnen zuerst die Renderings zeigen:

Wirkungsdemonstration Quellcode-Download

Die für Sie freigegebene jQuery-Diashow mit Miniaturbild-Karussellcode sieht wie folgt aus

 <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">&laquo; Previous Picture</a>
  </div>
  <div class="grid_3 omega" id="next">
  <a href="#next">Next Picture &raquo;</a>
  </div>
 </div>
 <!-- relevant for the tutorial - end -->

  
 </body>
</html>
Nach dem Login kopieren

Das Obige ist der JS-CSS-Code zum Implementieren des Seitenwechsels nach oben und unten. Ich hoffe, er gefällt Ihnen.

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage