zoukankan      html  css  js  c++  java
  • vue制作幻灯片-左右移动

    组件中:

    <template>
    <div class="slide-show" @mouseover="clearInv" @mouseout="runInv">
    <div class="slide-img">
    <a :href="slidesList[nowindex].href">
    <transition name="slide-trans">
    <img v-if="isShow" :src="slidesList[nowindex].src" />
    </transition>

    <transition name="slide-trans-old">
    <img v-if="!isShow" :src="slidesList[nowindex].src" />
    </transition>
    </a>
    </div>

    <h2></h2>
    <ul class="slide-pages">
    <li @click="goto(prevIndex)">&lt;</li>
    <li v-for="(item,index) in slidesList" @click="goto(index)" :class="{on: index === nowindex }">{{index+1}}</li>
    <li @click="goto(nextIndex)">&gt;</li>
    </ul>
    </div>
    </template>

    <script>

    export default {
    props: {
    slidesList: {
    type: Array,
    default: []
    },
    time: {
    type: Number,
    default: 1000
    }
    },
    data () {
    return {
    nowindex: 0,
    isShow: true,
    }
    },
    computed: {
    prevIndex () {
    if(this.nowindex === 0){
    return this.slidesList.length - 1
    }else{
    return this.nowindex - 1
    }
    },
    nextIndex () {
    if(this.nowindex === this.slidesList.length-1){
    return 0
    }else{
    return this.nowindex + 1
    }
    }
    },
    methods: {
    goto (index) {
    this.isShow = false
    setTimeout(() => {
    this.isShow = true
    this.nowindex = index;
    },10)
    },
    runInv () {
    this.clr=setInterval(() => {
    this.goto(this.nextIndex);
    }, this.time)
    },
    clearInv(){
    clearInterval(this.clr)
    }
    },
    mounted () {
    this.runInv ()
    }
    }
    </script>

    <style>
    .slide-trans-enter-active{
    transition: all .5s;
    }
    .slide-trans-enter{
    transform: translateX(900px);
    }
    .slide-trans-old-leave-active{
    transition: all .5s;
    transform: translateX(-900px);
    }
    .slide-show {
    position: relative;
    margin: 15px 15px 15px 0;
    900px;
    height: 500px;
    overflow: hidden;
    }
    .slide-show h2 {
    position: absolute;
    100%;
    height: 100%;
    color: #fff;
    background: #000;
    opacity: .5;
    bottom: 0;
    height: 30px;
    text-align: left;
    padding-left: 15px;
    }
    .slide-img {
    100%;
    }

    .slide-img img {
    100%;
    position: absolute;
    top: 0;
    }

    .slide-pages {
    position: absolute;
    bottom: 10px;
    right: 15px;
    }

    .slide-pages li {
    display: inline-block;
    padding: 0 10px;
    cursor: pointer;
    color: #fff;
    }

    .slide-pages li.on {
    text-decoration: underline;
    }
    </style>

    页面中:

    <sild-show :slidesList= "slides" :time="slideSpeed"></sild-show>

    import sildShow from "../components/sildeShow"
    export default{
      components:{
      sildShow
      },

      data () {
      return {
        slides: [
        {
          src: require('../assets/slideShow/pic1.jpg'),
          title: 'xxx1',
          href: 'detail/analysis'
        },
        {
          src: require('../assets/slideShow/pic2.jpg'),
          title: 'xxx2',
          href: 'detail/count'
        },
        {
          src: require('../assets/slideShow/pic3.jpg'),
          title: 'xxx3',
          href: 'detail/publish'
        },
        {
          src: require('../assets/slideShow/pic4.jpg'),
          title: 'xxx4',
          href: 'detail/forecast'
        }
        ],
        slideSpeed: 2000,

      }

      }

    }

  • 相关阅读:
    使企点QQ来消息时不自动弹出窗口(以避免错过旧的消息和避免正在回复A时自动定位到B从而影响客服效率)
    8款开源聊天软件
    博客园设置皮肤(宽屏等)及选择文本编辑器
    Windows Server 2019 设置使用照片查看器查看图片
    使windows10重启后打开上次的文件夹和程序
    TinyMCE 5 富文本编辑器好
    wordpress 安装 Elementor PRO 插件(破解版)
    无法打印,提示“windows 打印后台处理程序 没有运行”的解决方案
    第一次将代码提交至git error: failed to push some refs to 'https://gitee.com/xxx/test.git'
    git本地和远程的关联问题
  • 原文地址:https://www.cnblogs.com/seven077/p/7813312.html
Copyright © 2011-2022 走看看