源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

js+css实现上下翻页相册代码分享

  • 时间:2021-04-17 08:52 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:js+css实现上下翻页相册代码分享
 这是一款基于js+css实现上下翻页相册特效代码,相册可以从上下两个方向进行切换,是一款非常实用的幻灯片特效源码。  先为大家展示效果图: [img]http://files.jb51.net/file_images/article/201508/2015818140542380.png?201571814615[/img] [url=http://demo.jb51.net/js/2015/js+css-sxfyphoto/]效果演示[/url] [url=http://xiazai.jb51.net/201508/yuanma/js+css-sxfyphoto.rar]源码下载[/url] 为大家分享的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">« 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>
以上就是为大家分享的js+css实现上下翻页相册代码,希望大家可以喜欢。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部