添加轮播图

components/moblie/banner.vue

+<template>
+  <div class="banner-card__wrap">
+
+    <yun-div
+    >
+<!--        banner-card1-->
+      <yun-div
+      :width-v="750"
+      :height-v="300"
+      v-swipeleft="clickToGetNextPic"
+      v-swiperight="clickToGetPrePic"
+      v-if="bannerType===1"
+      >
+        <a :href="linkArr[currentImg]" target="_blank" style="width:100%;height:100%">
+          <yun-img :ske-h="300" :ske-w="750"  :src="imgArr[currentImg]" :style="{opacity:imgOpacity}" alt="" >
+          </yun-img>
+        </a>
+
+        <yun-div
+        :extend-style="{
+          position:'absolute',
+
+        }"
+        :position-v="[undefined,undefined,16,undefined]"
+        width-v="100%"
+        :margin-v="[0,'auto']"
+        :flex-v="['row','center','center']"
+        >
+          <yun-div
+            v-for=" (val,index) in imgArr"
+            :key="index"
+            v-tap="()=>clickToPointPic(index)"
+          :bg-color-v="index===currentImg?'#fff':'rgba(255,255,255,.4)'"
+          :border-r="[2,2,0,0]"
+          :width-v="16"
+          :height-v="4"
+          :margin-v="[0,5]"
+          ></yun-div>
+
+        </yun-div>
+      </yun-div>
+<!--        banner-card2-->
+
+      <yun-div
+        v-if="bannerType===2"
+        :width-v="704"
+        :margin-v="[0,'auto']"
+
+
+      >
+        <yun-div
+          :width-v="704"
+          bg-color-v="#BDBCD1"
+          :border-r="[4]"
+          :flex-v="['row','center','center']"
+          v-swipeleft="clickToGetNextPic"
+          v-swiperight="clickToGetPrePic"
+        >
+          <yun-img
+          :width-v="704"
+          height-v="auto"
+          :ske-w="704"
+          :ske-h="300"
+          :src="imgArr[currentImg]"
+          >
+          </yun-img>
+        </yun-div>
+        <yun-div
+        :extend-style="{
+          overflowX:'scroll',
+        }"
+        :flex-v="['row','flex-start','center']"
+        >
+          <yun-div
+          :width-v="80"
+          :height-v="80"
+          :border-r="[4]"
+          :border-v="[1,'solid',index===currentImg?'#00AAE6':'transparent']"
+          :extend-style="{
+            opacity: index===currentImg?1:0.6
+          }"
+          :no-flex-shrink="true"
+          :flex-v="['column','center','center']"
+          :margin-v="[16,6,0,0]"
+          v-for=" (val,index) in imgArr"
+          :key="val+index"
+          v-tap="()=>clickToPointPic(index)"
+          >
+            <yun-img
+            :style="{
+              maxWidth:'100%',
+              maxHeight:'100%',
+
+            }"
+            :src="val"
+            :ske-h="80"
+            :ske-w="80"
+            ></yun-img>
+          </yun-div>
+        </yun-div>
+      </yun-div>
+
+    </yun-div>
+  </div>
+
+
+</template>
+
+
+<script>
+  export default {
+    name:'banner',
+    props:{
+      imgArr:{
+        default:()=>([
+          'https://beyondclouds.oss-cn-beijing.aliyuncs.com/banner/yunliyunwai.jpg',
+          'https://beyondclouds.oss-cn-beijing.aliyuncs.com/banner/alpha.jpg',
+          'https://beyondclouds.oss-cn-beijing.aliyuncs.com/banner/alpha.jpg',
+          'https://beyondclouds.oss-cn-beijing.aliyuncs.com/banner/yunliyunwai.jpg',
+          'https://beyondclouds.oss-cn-beijing.aliyuncs.com/banner/yunliyunwai.jpg',
+          'https://beyondclouds.oss-cn-beijing.aliyuncs.com/banner/yunliyunwai.jpg',
+          'https://beyondclouds.oss-cn-beijing.aliyuncs.com/banner/yunliyunwai.jpg',
+          'https://beyondclouds.oss-cn-beijing.aliyuncs.com/banner/yunliyunwai.jpg',
+          'https://beyondclouds.oss-cn-beijing.aliyuncs.com/banner/yunliyunwai.jpg',
+          'https://beyondclouds.oss-cn-beijing.aliyuncs.com/banner/yunliyunwai.jpg',
+          'https://beyondclouds.oss-cn-beijing.aliyuncs.com/banner/yunliyunwai.jpg',
+        ]),
+        type: Array
+      },
+      linkArr:{
+        default:()=>([]),
+        type: Array
+      },
+      playTime:{
+        default:3000,
+        type: Number
+      },
+      bannerType:{
+        default:1,
+        type: Number
+      },
+      autoPlay:{
+        default:true,
+        type: Boolean
+      },
+      currentImg2:{
+        default:0,
+        type: Number
+      },
+    },
+
+    data(){
+      return{
+        imgSrc:'',
+        imgOpacity:1,
+        opacityTime:500,
+        bannerTimer:null,
+        currentImg:0,
+      }
+    },
+
+    watch:{
+
+    },
+
+    mounted(){
+      this.currentImg = this.currentImg2;
+      this.initBanner();
+    },
+
+
+
+    methods:{
+
+      //初始化轮播图
+      initBanner(){
+        clearInterval(this.bannerTimer)
+
+        if(this.autoPlay){
+          this.bannerTimer = setInterval(()=>{
+            let {imgArr,currentImg}  = this;
+            let length = imgArr.length;
+            if(currentImg<length-1){
+              this.currentImg=currentImg+1;
+            }else{
+              this.currentImg=0;
+            }
+          },this.playTime)
+
+        }
+      },
+
+      //点击到下一张轮播图
+      clickToGetNextPic(){
+        let {currentImg}  = this;
+        let length = this.imgArr.length;
+        if(currentImg<length-1){
+          this.currentImg=currentImg+1;
+        }else{
+          this.currentImg=0;
+        }
+        this.initBanner();
+      },
+
+      //点击到上一张轮播图
+      clickToGetPrePic(){
+        let {currentImg}  = this;
+        let length = this.imgArr.length;
+        if(currentImg>0){
+          this.currentImg=currentImg-1;
+        }else{
+          this.currentImg=length-1;
+        }
+        this.initBanner();
+      },
+
+      //点击到指定轮播图
+      clickToPointPic(index){
+        this.currentImg = index;
+        this.initBanner()
+      },
+
+
+    }
+
+  }
+</script>