집 >웹 프론트엔드 >JS 튜토리얼 >페이지 넘기기 앨범 코드 공유_자바스크립트 기술을 구현하는 js CSS

페이지 넘기기 앨범 코드 공유_자바스크립트 기술을 구현하는 js CSS

WBOY원래의: 2016-05-16 15:44:341222검색

이것은 사진 앨범의 페이지를 위아래로 넘기는 js CSS 기반의 특수 효과 코드입니다. 앨범을 위쪽 및 아래쪽 방향으로 전환할 수 있는 매우 실용적인 슬라이드쇼 특수 효과 소스 코드입니다.
먼저 렌더링을 보여드리겠습니다:

효과 시연 소스코드 다운로드

공유된 썸네일 캐러셀 코드가 포함된 jQuery 슬라이드쇼는 다음과 같습니다

 <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>

위는 모두가 좋아할 만한 페이지 상하 넘기기를 구현하는 js CSS 코드입니다.

성명：

이전 기사：easyui Draggable 구성 요소는 drag effect_jquery를 구현합니다.다음 기사：easyui Draggable 구성 요소는 drag effect_jquery를 구현합니다.

페이지 넘기기 앨범 코드 공유_자바스크립트 기술을 구현하는 js CSS

관련 기사