上下のページめくりアルバムコード共有を実現するjs css_javascriptスキル-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

上下のページめくりアルバムコード共有を実現するjs css_javascriptスキル

May 16, 2016 pm 03:44 PM

css js フォトアルバム

これは、アルバムの上下方向の切り替えを実現するためのjs cssベースの特殊効果コードです。非常に実用的なスライドショー特殊効果ソースコードです。
まずはレンダリングを見てみましょう:

効果デモソースコードダウンロード

あなたと共有されたサムネイルカルーセルコードを含む jQuery スライドショーは次のとおりです

 &lt;head&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"/&gt;
 
 &lt;title&gt;js+css实现上下翻页相册&lt;/title&gt;
 
 &lt;link rel="stylesheet" type="text/css" media="screen" href="css/reset.css" /&gt;
 &lt;link rel="stylesheet" type="text/css" media="screen" href="css/960.css" /&gt;
 &lt;link rel="stylesheet" type="text/css" media="screen" href="css/main.css" /&gt;
 
 &lt;script type="text/javascript" src="js/jquery-1.3.2.min.js"&gt;&lt;/script&gt;
 &lt;script type="text/javascript" src="js/demo.js"&gt;&lt;/script&gt;
 &lt;/head&gt;
 
 &lt;body&gt;
 &lt;div class="container_12" id="wrapper"&gt;
 &lt;div class="grid_8" id="content"&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
 
 &lt;!-- relevant for the tutorial - start --&gt;
 &lt;div class="grid_6 prefix_1 suffix_1" id="gallery"&gt;
  &lt;div id="pictures"&gt;
  &lt;img src="images/picture1.png" alt="" /&gt;
  &lt;img src="images/picture2.png" alt="" /&gt;
  &lt;img src="images/picture3.png" alt="" /&gt;
  &lt;img src="images/picture4.png" alt="" /&gt;
  &lt;img src="images/picture5.png" alt="" /&gt;
  &lt;/div&gt;
  
  &lt;div class="grid_3 alpha" id="prev"&gt;
  &lt;a href="#previous"&gt;&laquo; Previous Picture&lt;/a&gt;
  &lt;/div&gt;
  &lt;div class="grid_3 omega" id="next"&gt;
  &lt;a href="#next"&gt;Next Picture &raquo;&lt;/a&gt;
  &lt;/div&gt;
 &lt;/div&gt;
 &lt;!-- relevant for the tutorial - end --&gt;

  
 &lt;/body&gt;
&lt;/html&gt;

ログイン後にコピー

上記は、上下のページ反転を実装するための JS CSS コードです。気に入っていただければ幸いです。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。