安信娱乐谁是老板

拼图开发文档

轮播

轮播常用于横幅,图片交替展示等效果。

轮播样式

框架用.flip安信娱乐谁是老板定义轮播样式,其基本样式为:

图片
图片
图片
图片
    <div class="flip" id="flip">
      <div class="flip-body">
        <div class="flip-item"><img src="..." class="img-auto" alt="图片" /></div>
        <div class="flip-item"><img src="..." class="img-auto" alt="图片" /></div>
        <div class="flip-item"><img src="..." class="img-auto" alt="图片" /></div>
        <div class="flip-item"><img src="..." class="img-auto" alt="图片" /></div>
      </div>
      <div class="flip-prev" id="flip-prev"></div>
      <div class="flip-next" id="flip-next"></div>
    </div>
  

调用方法

    <script>
      $(function(){
        $('#flip').flip({
          "autoplay":true,
          "page":true,
          "prev":"#flip-prev",
          "next":"#flip-next",
        });
      });
    </script>
  

参数说明

参数类型默认值参数值说明
effectstringscrollscroll:滚动
fade:渐变
显示的效果
speednumber500/滚动或渐变的时间,单位为毫秒
autoplayboolfalsetrue:自动播放
false:不自动播放
是否自动播放
intervalnumber5/自动播放时间隔时间,单位为秒
columnnumber1/显示的列数
rownumber1/显示的行数,行数大于1时,需要设置轮播区域的高度
spacenumber0/当列或行大于1时,轮播项之间的间距
touchbooltruetrue:支持触屏
false:不支持触屏
是否支持触屏轮播
pervobject//上一项目的触发对象,如"#id"或".class"
nextobject//下一项目的触发对象,如"#id"或".class"
pageboolfalsetrue:显示分页
false:不显示分页
是否显示分页
togglejson"class":"nav nav-turn",
"active":"active"
/分页触发
autojson//响应显示,如:
"0":{"column":1,"row":1,"space":8},
"768":{"column":2,"row":2,"space":16}

自动播放

轮播默认为不自动播放,参数autoplay值为true时,默认间隔时间为5秒,可通过调整参数interval值改变自动播放的间隔时间;

图片
图片
图片
图片
    <div class="flip" id="autoplay">
      <div class="flip-body">
        <div class="flip-item"><img src="..." class="img-auto" alt="图片" /></div>
        <div class="flip-item"><img src="..." class="img-auto" alt="图片" /></div>
        <div class="flip-item"><img src="..." class="img-auto" alt="图片" /></div>
        <div class="flip-item"><img src="..." class="img-auto" alt="图片" /></div>
      </div>
    </div>
    <script>
      $(function(){
        $('#autoplay').flip({
          "autoplay":true,
          "interval":3,
        });
      });
    </script>
  

禁止自动播放

当参数autoplay值为false或不设置时,轮播不自动播放,此时可通过前后按钮或翻转切换导航触发。

图片
图片
图片
图片
    <script>
      $(function(){
        $('#disable-autoplay').flip({
          "prev":"#disable-prev",
          "next":"#disable-next",
          "page":true,
        });
      });
    </script>
  

渐变效果

轮播切换的效果默认为滚动,参数effect值为fade时,其效果显示为渐变,同时可改变speed值,改变切换的速度:

图片
图片
图片
图片
    <div class="flip" id="fade">
      <div class="flip-body">
        <div class="flip-item"><img src="..." class="img-auto" alt="图片" /></div>
        <div class="flip-item"><img src="..." class="img-auto" alt="图片" /></div>
        <div class="flip-item"><img src="..." class="img-auto" alt="图片" /></div>
        <div class="flip-item"><img src="..." class="img-auto" alt="图片" /></div>
      </div>
      <div class="flip-prev" id="fade-prev"></div>
      <div class="flip-next" id="fade-next"></div>
    </div>
    <script>
      $(function(){
        $('#fade').flip({
          "effect":"fade",
          "speed":300,
          "prev":"#fade-prev",
          "next":"#fade-next",
        });
      });
    </script>
  

多行多列

轮播默认一次只播放一个项目,当参数columnrow大于2时,显示为多行或多列的效果,同时可以设置space值,调整行列间隙;

多列轮播

图片
图片
图片
图片
图片
图片
图片
图片
图片
    <div class="flip" id="column">
      <div class="flip-body">
        <div class="flip-item"><img src="..." class="img-auto" alt="图片" /></div>
        <div class="flip-item"><img src="..." class="img-auto" alt="图片" /></div>
        <div class="flip-item"><img src="..." class="img-auto" alt="图片" /></div>
        <div class="flip-item"><img src="..." class="img-auto" alt="图片" /></div>
        <div class="flip-item"><img src="..." class="img-auto" alt="图片" /></div>
        <div class="flip-item"><img src="..." class="img-auto" alt="图片" /></div>
        <div class="flip-item"><img src="..." class="img-auto" alt="图片" /></div>
        <div class="flip-item"><img src="..." class="img-auto" alt="图片" /></div>
        <div class="flip-item"><img src="..." class="img-auto" alt="图片" /></div>
      </div>
      <div class="flip-prev" id="column-prev"></div>
      <div class="flip-next" id="column-next"></div>
    </div>
    <script>
      $(function(){
        $('#column').flip({
          "column":3,
          "space":16,
          "prev":"#column-prev",
          "next":"#column-next",
        });
      });
    </script>
  

多行轮播

多行轮播为row值大于2时,轮播为多行显示,此时还需要设置播放区域的高度。

图片
图片
图片
图片
图片
图片
图片
图片
    <div class="flip" id="row" style="height:620px;">
      <div class="flip-body">
        <div class="flip-item"><img src="..." class="img-auto" alt="图片" /></div>
        <div class="flip-item"><img src="..." class="img-auto" alt="图片" /></div>
        <div class="flip-item"><img src="..." class="img-auto" alt="图片" /></div>
        <div class="flip-item"><img src="..." class="img-auto" alt="图片" /></div>
        <div class="flip-item"><img src="..." class="img-auto" alt="图片" /></div>
        <div class="flip-item"><img src="..." class="img-auto" alt="图片" /></div>
        <div class="flip-item"><img src="..." class="img-auto" alt="图片" /></div>
        <div class="flip-item"><img src="..." class="img-auto" alt="图片" /></div>
      </div>
      <div class="flip-prev" id="row-prev"></div>
      <div class="flip-next" id="row-next"></div>
    </div>
    <script>
      $(function(){
        $('#row').flip({
          "row":2,
          "column":2,
          "space":20,
          "prev":"#row-prev",
          "next":"#row-next",
        });
      });
    </script>
  

响应轮播

响应轮播为在不同终端大小的情况下,显示不同的数目的行、列或间隙值,如{"768":{"column":2,"row":1,"space":8}}为终端宽在768以上显示2列、1行、间隙8px。

图片
图片
图片
图片
图片
图片
图片
图片
    <div class="flip" id="auto">
      <div class="flip-body">
        <div class="flip-item"><img src="..." class="img-auto" alt="图片" /></div>
        <div class="flip-item"><img src="..." class="img-auto" alt="图片" /></div>
        <div class="flip-item"><img src="..." class="img-auto" alt="图片" /></div>
        <div class="flip-item"><img src="..." class="img-auto" alt="图片" /></div>
        <div class="flip-item"><img src="..." class="img-auto" alt="图片" /></div>
        <div class="flip-item"><img src="..." class="img-auto" alt="图片" /></div>
        <div class="flip-item"><img src="..." class="img-auto" alt="图片" /></div>
        <div class="flip-item"><img src="..." class="img-auto" alt="图片" /></div>
      </div>
      <div class="flip-prev" id="auto-prev"></div>
      <div class="flip-next" id="auto-next"></div>
    </div>
    <script>
      $(function(){
        $('#auto').flip({
          "prev":"#auto-prev",
          "next":"#auto-next",
          "auto":{
            "762":{"column":2,"row":1,"space":8},
            "1232":{"column":3,"row":1,"space":16}
          },
        });
      });
    </script>