轮播

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

轮播样式

框架用.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>

参数说明

参数	类型	默认值	参数值	说明
effect	string	scroll	scroll:滚动 fade:渐变	显示的效果
speed	number	500	/	滚动或渐变的时间，单位为毫秒
autoplay	bool	false	true:自动播放 false:不自动播放	是否自动播放
interval	number	5	/	自动播放时间隔时间，单位为秒
column	number	1	/	显示的列数
row	number	1	/	显示的行数，行数大于1时，需要设置轮播区域的高度
space	number	0	/	当列或行大于1时，轮播项之间的间距
touch	bool	true	true:支持触屏 false:不支持触屏	是否支持触屏轮播
perv	object	/	/	上一项目的触发对象，如"#id"或".class"
next	object	/	/	下一项目的触发对象，如"#id"或".class"
page	bool	false	true:显示分页 false:不显示分页	是否显示分页
toggle	json	"class":"nav nav-turn", "active":"active"	/	分页触发
auto	json	/	/	响应显示，如: "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>

多行多列

轮播默认一次只播放一个项目，当参数column或row大于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>