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

当前位置：网站建设 > 技术支持

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

资料来源：网络整理时间：2023/3/4 1:05:00 共计：3585 浏览

《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

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：jQuery幻灯片轮播插件Slippry（带缩略图）等比例响应式_js/jQuery | ·下一条：jQuery幻灯片轮播插件Slippry 使用方法配置参数_js/jQuery