master

分支 (3)

管理

管理

master

develop

feature

honework1
/
text.html

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 必须先引入vue，再引入elementui -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.9"></script>
<!-- 引入elementui组件库-->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<style>
  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>

</head>

<body>
<div id="outerBox" style="width:800px;margin: 0 auto;">
  <el-carousel  :interval="1500" type="card" height="200px">
    <el-carousel-item v-for="item in goods" :key="item">
      <img  height="100%" width="100%" :src="item.src" alt="">
    </el-carousel-item>
  </el-carousel>
  <!-- <el-carousel :interval="5000" arrow="always">
    <el-carousel-item v-for="item in goods" :key="item">
      <img height="100%" width="100%" :src="item.src" alt="">
    </el-carousel-item>
  </el-carousel> -->
</div>
</body>
<script>
new Vue({
  el: '#outerBox',
  data:{
    goods:[
        {src:'./img/2.jpg'},
        {src:'./img/3.jpg'},
        {src:'./img/4.jpg'}
    ]
  }
})
</script>
</html>