走马灯

例子

走马灯 - 图1

  1. <avue-carousel :option="option"></avue-carousel>
  3. <script>
  4. export default {
  5.     data() {
  6.       return {
  7.         option:{
  8.           height:300,
  9.           data:[
  10.             {
  11.               title: '这是跑马灯的标题1',
  12.               href:"https://avue.top",
  13.               src:'http://pic.soutu123.com/back_pic/18/07/06/514e96eedb99a663e02ab32614713243.jpg!/fw/700/quality/90/unsharp/true/compress/true'
  14.             },
  15.             {
  16.               title: '这是跑马灯的标题2',
  17.               href:"https://avue.top",
  18.               src:'http://pic.soutu123.com/back_pic/18/09/18/0ca02eb9c35f095481196354a1f455c8.jpg!/fw/700/quality/90/unsharp/true/compress/true'
  19.             },
  20.             {
  21.              title: '这是跑马灯的标题3',
  22.              href:"https://avue.top",
  23.              src:'http://pic.soutu123.com/back_pic/18/10/19/9ce53f1e0215b15e996b856e098d4c88.jpg!/fw/700/quality/90/unsharp/true/compress/true'
  24.             }
  25.           ]
  26.         },
  27.       };
  28.     }
  29. }
  30. </script>

旋转展示

走马灯 - 图2

  1. <avue-carousel :option="option1"></avue-carousel>
  3. <script>
  4. export default {
  5.     data() {
  6.       return {
  7.         option1:{
  8.           type:'card',
  9.           height:250,
  10.           autoplay:true,
  11.           interval:3000,
  12.           data:[
  13.             {
  14.               title: '这是跑马灯的标题1',
  15.               href:"https://avue.top",
  16.               src:'http://pic.soutu123.com/back_pic/18/07/06/514e96eedb99a663e02ab32614713243.jpg!/fw/700/quality/90/unsharp/true/compress/true'
  17.             },
  18.             {
  19.               title: '这是跑马灯的标题2',
  20.               href:"https://avue.top",
  21.               src:'http://pic.soutu123.com/back_pic/18/09/18/0ca02eb9c35f095481196354a1f455c8.jpg!/fw/700/quality/90/unsharp/true/compress/true'
  22.             },
  23.             {
  24.              title: '这是跑马灯的标题3',
  25.              href:"https://avue.top",
  26.              src:'http://pic.soutu123.com/back_pic/18/10/19/9ce53f1e0215b15e996b856e098d4c88.jpg!/fw/700/quality/90/unsharp/true/compress/true'
  27.             }
  28.           ]
  29.         },
  30.       };
  31.     }
  32. }
  33. </script>
参数说明类型可选值默认值
height高度String / Number-300
autoplay是否自动轮播Booleantrue / falsetrue
interval自动轮播的时间String / Number-3000
title标题String--
href点击跳转的链接String--
src图片地址String--
type类型Stringcard / boxbox