suchen

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
WBOYOriginal
2016-05-16 15:44:341249Durchsuche

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>

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

Stellungnahme：
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
Vorheriger Artikel：Die ziehbare EasyUI-Komponente implementiert Drag Effect_JQueryNächster Artikel：Die ziehbare EasyUI-Komponente implementiert Drag Effect_JQuery

In Verbindung stehende Artikel

Mehr sehen