vue中无缝轮播简单实现

超、凢脫俗 2022-03-25 14:14 349阅读 0赞

<template>
        <div>
            <div class="slider-stage">
                <ul ref='sli' class="slider">
                    <li>
                        <img src="static/imgs/1.jpg" alt="">
                    </li>
                    <li>
                        <img src="static/imgs/2.jpg" alt="">
                    </li>
                    <li>
                        <img src="static/imgs/3.jpg" alt="">
                    </li>
                    <li>
                        <img src="static/imgs/1.jpg" alt="">
                    </li>
                    <li>
                        <img src="static/imgs/2.jpg" alt="">
                    </li>
                </ul>
            </div>
    
        </div>
    
    </template>
    
    <script>
        export default {
            name: "slider",
            data() {
                return {
                    index: 1,
                }
            },
            created() {
                this.autoLoop()
    
            },
            methods: {
                autoLoop() {
                    setInterval(()=>{
                        this.$refs.sli.style.left = -200*this.index + 'px'
                        this.$refs.sli.style.transition= "all 0.5s"
                        this.index++
    
                        if(parseInt(this.$refs.sli.style.left) <= -600){
                            setTimeout(()=>{
                                //这个setTimeout是因为left=-600px，transition有0.5s执行动画，需要等它执行完成后，再设置left=0，
                                //否则，直接跳到left=0,动画生硬，
                                this.$refs.sli.style.left = 0 + 'px'
                                this.$refs.sli.style.transition= "all 0s"
                                this.index = 1
                            },500)
                        }
                    },1000)
    
                }
            }
        }
    </script>
    
    <style>
        html {
            color: #000;
            background: #FFF;
        }
    
        body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form,
        fieldset, input, textarea, p, blockquote, th, td {
            margin: 0;
            padding: 0;
        }
    
        table {
            border-collapse: collapse;
            border-spacing: 0;
        }
    
        fieldset, img {
            border: 0;
        }
    
        address, caption, cite, code, dfn, em, strong, th, var {
            font-style: normal;
            font-weight: normal;
        }
    
        ol, ul {
            list-style: none;
        }
    
        caption, th {
            text-align: left;
        }
    
        h1, h2, h3, h4, h5, h6 {
            font-size: 100%;
            font-weight: normal;
        }
    
        q:before, q:after {
            content: '';
        }
    
        abbr, acronym {
            border: 0;
        }
    
        * {
            margin: 0px;
            padding: 0px;
    
        }
    
        a {
            text-decoration: none;
            color: #000000;
            font-size: 15px;
            /*字体*/
        }
    
        li {
            list-style: none;
        }
    
        input, img {
            border: none;
        }
    </style>
    <style>
        .slider-stage {
            width: 200px;
            height: 100px;
            background-color: rgba(134, 134, 134, 0.33);
            border: 10px grey solid;
    
            margin: 200px auto;
            position: relative;
            overflow: hidden;
        }
    
        .slider {
            position: absolute;
            width: 500%;
            height: 100px;
            left: 0px;
            top: 0;
        }
        .slider li {
            list-style: none;
            float: left;
        }
        .slider img {
            width: 200px;
            height: 100px;
        }
    
    </style>