注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

jquery响应式幻灯片画廊插件S Gallery

媒体 fishcity 1373浏览

jquery响应式画廊插件S Gallery

S Gallery是一款响应式的jQuery画廊插件,让你的图片动感起来,插件使用了CSS3动画,轻量级,技持键盘操作,在幻灯片视图模式下您可以使用左右箭头键来切换图像,当然您也可以用shift键从幻灯片切换到网格视图。请使用支持CSS3的现浏览器浏览。

jquery实例:s Gallery使用方法

引入核心文件

  <link rel="stylesheet" href="css/demo-styles.css" />
  <link rel="stylesheet" href="css/styles.css" />
  <script src="http://libs.useso.com/js/jquery/1.8.2/jquery.min.js"></script>
  <script src="js/gallery.js"></script>

构建html,这里的代码分两个层次,一个实现网格视图,一个实现幻灯片视图

<div id="gallery-container">
    
    <ul class="items--small">
      <li class="item"><a href="#"><img src="images/small-1.png" alt="" /></a></li>
      <li class="item"><a href="#"><img src="images/small-2.png" alt="" /></a></li>
      <li class="item"><a href="#"><img src="images/small-3.png" alt="" /></a></li>
      <li class="item"><a href="#"><img src="images/small-4.png" alt="" /></a></li>
      <li class="item"><a href="#"><img src="images/small-5.png" alt="" /></a></li>
      <li class="item"><a href="#"><img src="images/small-6.png" alt="" /></a></li>
      <li class="item"><a href="#"><img src="images/small-7.png" alt="" /></a></li>
      <li class="item"><a href="#"><img src="images/small-8.png" alt="" /></a></li>
      <li class="item"><a href="#"><img src="images/small-9.png" alt="" /></a></li>
      <li class="item"><a href="#"><img src="images/small-10.png" alt="" /></a></li>
      <li class="item"><a href="#"><img src="images/small-11.png" alt="" /></a></li>
      <li class="item"><a href="#"><img src="images/small-12.png" alt="" /></a></li>
    </ul>
    <ul class="items--big">
      <li class="item--big">
        <a href="#">
          <figure>
            <img src="images/big-1.jpg" alt="" />
            <figcaption class="img-caption">
              Caption
            </figcaption>
          </figure>
          </a>
      </li>
      <li class="item--big">
        <a href="#">
          <figure>
            <img src="images/big-2.jpg" alt="" />
            <figcaption class="img-caption">
              Caption
            </figcaption>
          </figure>
          </a>
      </li>
      <li class="item--big">
        <a href="#">
          <figure>
            <img src="images/big-3.jpg" alt="" />
            <figcaption class="img-caption">
              Caption
            </figcaption>
          </figure>
          </a>
      </li>
      <li class="item--big">
        <a href="#">
          <figure>
            <img src="images/big-4.jpg" alt="" />
            <figcaption class="img-caption">
              Caption
            </figcaption>
          </figure>
          </a>
      </li>
      <li class="item--big">
        <a href="#">
          <figure>
            <img src="images/big-5.jpg" alt="" />
            <figcaption class="img-caption">
              Caption
            </figcaption>
          </figure>
          </a>
      </li>
      <li class="item--big">
        <a href="#">
          <figure>
            <img src="images/big-6.jpg" alt="" />
            <figcaption class="img-caption">
              Caption
            </figcaption>
          </figure>
          </a>
      </li>
      <li class="item--big">
        <a href="#">
          <figure>
            <img src="images/big-7.jpg" alt="" />
            <figcaption class="img-caption">
              Caption
            </figcaption>
          </figure>
          </a>
      </li>
      <li class="item--big">
        <a href="#">
          <figure>
            <img src="images/big-8.jpg" alt="" />
            <figcaption class="img-caption">
              Caption
            </figcaption>
          </figure>
          </a>
      </li>
      <li class="item--big">
        <a href="#">
          <figure>
            <img src="images/big-9.jpg" alt="" />
            <figcaption class="img-caption">
              Caption
            </figcaption>
          </figure>
          </a>
      </li>
      <li class="item--big">
        <a href="#">
          <figure>
            <img src="images/big-10.jpg" alt="" />
            <figcaption class="img-caption">
              Caption
            </figcaption>
          </figure>
          </a>
      </li>
      <li class="item--big">
        <a href="#">
          <figure>
            <img src="images/big-11.jpg" alt="" />
            <figcaption class="img-caption">
              Caption
            </figcaption>
          </figure>
          </a>
      </li>
      <li class="item--big">
        <a href="#">
          <figure>
            <img src="images/big-12.jpg" alt="" />
            <figcaption class="img-caption">
              Caption
            </figcaption>
          </figure>
          </a>
      </li>
    </ul>
    <div class="controls">
      <span class="control icon-arrow-left" data-direction="previous"></span> 
      <span class="control icon-arrow-right" data-direction="next"></span> 
      <span class="grid icon-grid"></span>
      <span class="fs-toggle icon-fullscreen"></span>
    </div>
    
  </div>

写入JS实例化

$(document).ready(function(){
     $('#gallery-container').sGallery({
        fullScreenEnabled: true
      });
    });

转载请注明:jQ酷 » jquery响应式幻灯片画廊插件S Gallery

下载地址:本站下载 | 百度云 | 官方下载
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。