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

老白 1周前 16浏览 0评论

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

基于jQuery幻灯片插件Slippry.png jQuery幻灯片轮播插件Slippry 等比例响应式 js/jQuery

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

演示网址:

http://www.ylefu.com/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

评论