zoukankan      html  css  js  c++  java
  • vue图片轮播展示

    <template>
    <div id="slider">
    <div class="window" @mouseover="stop" @mouseleave="play">
    <ul class="container" :style="containerStyle">
    <li>
    <img :style="{imgWidth+'px'}" :src="sliders[sliders.length - 1].img" alt="">
    </li>
    <li v-for="(item, index) in sliders" :key="index">
    <img :style="{imgWidth+'px'}" :src="item.img" alt="">
    </li>
    <li>
    <img :style="{imgWidth+'px'}" :src="sliders[0].img" alt="">
    </li>
    </ul>
    <ul class="direction">
    <li class="left" @click="move(600, 1, speed)">
    <svg class="icon" width="30px" height="30.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#ffffff" d="M481.233 904c8.189 0 16.379-3.124 22.628-9.372 12.496-12.497 12.496-32.759 0-45.256L166.488 512l337.373-337.373c12.496-12.497 12.496-32.758 0-45.255-12.498-12.497-32.758-12.497-45.256 0l-360 360c-12.496 12.497-12.496 32.758 0 45.255l360 360c6.249 6.249 14.439 9.373 22.628 9.373z" /></svg>
    </li>
    <li class="right" @click="move(600, -1, speed)">
    <svg class="icon" width="30px" height="30.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#ffffff" d="M557.179 904c-8.189 0-16.379-3.124-22.628-9.372-12.496-12.497-12.496-32.759 0-45.256L871.924 512 534.551 174.627c-12.496-12.497-12.496-32.758 0-45.255 12.498-12.497 32.758-12.497 45.256 0l360 360c12.496 12.497 12.496 32.758 0 45.255l-360 360c-6.249 6.249-14.439 9.373-22.628 9.373z" /></svg>
    </li>
    </ul>
    <ul class="dots">
    <li v-for="(dot, i) in sliders" :key="i"
    :class="{dotted: i === (currentIndex-1)}"
    @click = jump(i+1)
    >
    </li>
    </ul>
    </div>
    </div>
    </template>

    <script>
    export default {
    name: 'slider',
    props: {
    initialSpeed: {
    type: Number,
    default: 30
    },
    initialInterval: {
    type: Number,
    default: 3
    }
    },
    data() {
    return {
    sliders: [
    {
    img: 'http://img.hb.aicdn.com/adbde61e4343dedd21e97ea7f22666825a8db7d077ffe-qn8Pjn_fw658'
    },
    {
    img: 'http://img.hb.aicdn.com/adeed7d28df6e776c2fa6032579c697381d1a82b7fe00-fwRqgn_fw658'
    },
    {
    img: 'http://img.hb.aicdn.com/ab7f48509b3c0353017d9a85ef1d12400c9b2724540d4-p3zouo_fw658'
    },
    {
    img: 'http://img.hb.aicdn.com/60f788fc2a846192f224b9e6d4904b30e54926211d3d67-ACFJ9G_fw658'
    },
    {
    img: 'http://img.hb.aicdn.com/22ded455284aab361b8d2056e82f74a891a019704296a-PSraEB_fw658'
    }
    ],
    imgWidth: 600,
    currentIndex: 1,
    distance: -600,
    transitionEnd: true,
    speed: this.initialSpeed
    }
    },
    computed: {
    containerStyle() {
    return {
    transform: `translate3d(${this.distance}px, 0, 0)`
    }
    },
    interval() {
    return this.initialInterval * 1000
    }
    },
    mounted() {
    this.init()
    },
    methods: {
    init() {
    this.play()
    window.onblur = function() { this.stop() }.bind(this)
    window.onfocus = function() { this.play() }.bind(this)
    },
    move(offset, direction, speed) {
    console.log(speed)
    if (!this.transitionEnd) return
    this.transitionEnd = false
    direction === -1 ? this.currentIndex += offset / 600 : this.currentIndex -= offset / 600
    if (this.currentIndex > 5) this.currentIndex = 1
    if (this.currentIndex < 1) this.currentIndex = 5

    const destination = this.distance + offset * direction
    this.animate(destination, direction, speed)
    },
    animate(des, direc, speed) {
    if (this.temp) {
    window.clearInterval(this.temp)
    this.temp = null
    }
    this.temp = window.setInterval(() => {
    if ((direc === -1 && des < this.distance) || (direc === 1 && des > this.distance)) {
    this.distance += speed * direc
    } else {
    this.transitionEnd = true
    window.clearInterval(this.temp)
    this.distance = des
    if (des < -3000) this.distance = -600
    if (des > -600) this.distance = -3000
    }
    }, 20)
    },
    jump(index) {
    const direction = index - this.currentIndex >= 0 ? -1 : 1
    const offset = Math.abs(index - this.currentIndex) * 600
    const jumpSpeed = Math.abs(index - this.currentIndex) === 0 ? this.speed : Math.abs(index - this.currentIndex) * this.speed
    this.move(offset, direction, jumpSpeed)
    },
    play() {
    if (this.timer) {
    window.clearInterval(this.timer)
    this.timer = null
    }
    this.timer = window.setInterval(() => {
    this.move(600, -1, this.speed)
    }, this.interval)
    },
    stop() {
    window.clearInterval(this.timer)
    this.timer = null
    }
    }
    }
    </script>
    <style>
    *{
    box-sizing: border-box;
    margin:0;
    padding:0;
    }
    ol,ul{
    list-style: none;
    }
    #slider{
    text-align: center;
    }
    .window{
    position:relative;
    600px;
    height:400px;
    margin:0 auto;
    overflow:hidden;
    }
    .container{
    display:flex;
    position:absolute;
    }
    .left, .right{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    50px;
    height:50px;
    background-color:rgba(0,0,0,.3);
    border-radius:50%;
    cursor:pointer;
    }
    .left{
    left:3%;
    padding-left:12px;
    padding-top:10px;
    }
    .right{
    right:3%;
    padding-right:12px;
    padding-top:10px;
    }
    img{
    user-select: none;
    }
    .dots{
    position:absolute;
    bottom:10px;
    left:50%;
    transform:translateX(-50%);
    }
    .dots li{
    display:inline-block;
    15px;
    height:15px;
    margin:0 3px;
    border:1px solid white;
    border-radius:50%;
    background-color:#333;
    cursor:pointer;
    }
    .dots .dotted{
    background-color:orange;
    }
    </style>
  • 相关阅读:
    在html5中不支持<table>的cellpadding 和 cellspacing ; 2) 如何用css实现 cellpadding, cellspacing ; 3) tr , th 是 有 border, 没有 padding 的.
    css 实现 左右div 等高, 同时父级div就是最高的子div的高度.
    1)jquery validate 远程验证remote,自定义验证 , 手机号验证 2)bootstrap validate 远程remote验证的方法.
    点击图片或者鼠标放上hover .图片变大. 1)可以使用css中的transition, transform 2) 预先设置一个 弹出div. 3)弹出层 alert ; 4) 浏览器的宽度document.documentElement.clientWidth || document.body.clientWidth
    [上一个][下一个][上一节][下一节]
    点击li ,父辈出现; 子级,子辈不出现. prevUntil ---> 前面多个, 截止到 截止元素 , prev([expr]) --> 前面一个.
    通过 onclick = "test()"事件定义的事件 , 如何触发.
    在 子 iframe中 点击一个按钮, 变换 这个 iframe的地址url.
    ueditor 设置高度height. ue.setHeight(400); 设置宽度 width
    Yarn--集群资源管理器--总结
  • 原文地址:https://www.cnblogs.com/minxiaofei/p/9243810.html
Copyright © 2011-2022 走看看