jQuery幻灯片轮播插件Slippry 等比例响应式

《jQuery幻灯片轮播插件Slippry 使用方法 配置参数》 配置参数！

jQuery幻灯片轮播插件Slippry 等比例响应式

演示网址：

https://www.yzktw.com.cn/demo/Slippry/

HTML结构：

!DOCTYPE html>
    html>
    head>
    title>
    slippry demo/title>
    script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
    /script>
    script src="slippry.min.js">
    /script>
    meta name="viewport" content="width=device-width">
    link rel="stylesheet" href="slippry.css">
    style>
body{
    margin: 0;
    padding: 0;
    font-family: 'source-sans-pro', Helvetica, Arial, sans-serif;
    font-size: 14px;
}
.demo_wrapper {
    width: 60%;
    margin: 0 auto;
}
@media only screen and (max-device-width: 800px), screen and (max-width: 800px) {
  .demo_wrapper {
    width: 80%;
}
  }
.demo_block {
    width: 100%;
}
    /style>
    /head>
    body>
    section class="demo_wrapper">
     article class="demo_block">
      ul id="demo1">
       li>
    a href="#slide1">
    img src="img/image-1.jpg" alt="This is caption 1 a href='#link'>
    Even with links!/a>
    ">
    /a>
    /li>
       li>
    a href="#slide2">
    img src="img/image-2.jpg"  alt="This is caption 2">
    /a>
    /li>
       li>
    a href="#slide3">
    img src="img/image-4.jpg" alt="And this is some very long caption for slide 3. Yes, really long.">
    /a>
    /li>
      /ul>
        a href="#glob" class="prev">
    Prev/a>
     /   a href="#glob" class="next">
    Next/a>
     ||   a href="#glob" class="init">
    Init/a>
     |   a href="#glob" class="reset">
    Destroy/a>
     |   a href="#glob" class="reload">
    Reload/a>
     ||   a href="#glob" class="stop">
    Stop/a>
     |   a href="#glob" class="start">
    Start/a>
       /article>
    /section>
    script>
   $(function() {
    var demo1 = $("#demo1").slippry({
      //transition: 'fade', //淡入淡出     transition: 'horizontal', // 左滚      useCSS: true,      speed: 600,      pause: 3000,      auto: true,      preload: 'visible',      autoHover: false    }
    );
        //暂停    $('.stop').click(function () {
         demo1.stopAuto();
    }
    );
        //开始    $('.start').click(function () {
         demo1.startAuto();
    }
    );
        //上一页    $('.prev').click(function () {
         demo1.goToPrevSlide();
         return false;
    }
    );
    //下一页    $('.next').click(function () {
         demo1.goToNextSlide();
         return false;
    }
    );
    //重置    $('.reset').click(function () {
         demo1.destroySlider();
         return false;
    }
    );
    //重来    $('.reload').click(function () {
         demo1.reloadSlider();
         return false;
    }
    );
    //最初    $('.init').click(function () {
         demo1 = $("#demo1").slippry();
         return false;
    }
    );
   }
    );
    /script>
     /body>
    /html>
    

下载：

基于jQuery幻灯片插件Slippry.zip

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！