vue实现的轮播图

最新推荐文章于 2023-08-26 16:51:26 发布

转载最新推荐文章于 2023-08-26 16:51:26 发布 · 559 阅读

vue 专栏收录该内容

14 篇文章

订阅专栏

博客提及了CSS、HTML和Vue，这些均为前端开发领域的重要技术。CSS用于网页样式设计，HTML是网页结构搭建基础，Vue则是流行的前端框架，能高效构建用户界面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css:

<style>
    *{
        box-sizing: border-box;
        margin:0;
        padding:0;
    }
    ol,ul{
        list-style: none;
    }
    #slider{
        text-align: center;
    }
    .window{
        position:relative;
        width:600px;
        height:400px;
        margin:0 auto;
        overflow:hidden;
    }
    .container{
        display:flex;
        position:absolute;
    }
    .left, .right{
        position:absolute;
        top:50%;
        transform:translateY(-50%);
        width: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;
        width:15px;
        height:15px;
        margin:0 3px;
        border:1px solid white;
        border-radius:50%;
        background-color:#333;
        cursor:pointer;
    }
    .dots .dotted{
        background-color:orange;
    }
</style>

html:

<div id="slider">
    <div class="window" @mouseover="stop" @mouseleave="play">
        <ul class="container" :style="containerStyle">
            <li>
                <img :style="{width:imgWidth+'px'}" :src="sliders[sliders.length - 1].img" alt="">
            </li>
            <li  v-for="(item, index) in sliders" :key="index">
                <img :style="{width:imgWidth+'px'}" :src="item.img" alt="">
            </li>
            <li>
                <img :style="{width: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>

vue:

<script>
    var vm = new Vue({
        el: '#slider',
        data:{
            sliders:[
                {
                    img:'images/index_banner.jpg'
                },
                {
                    img:'images/test_bg.jpg'
                },
                {
                    img:'images/index_banner.jpg'
                },
                {
                    img:'images/test_bg.jpg'
                },
                {
                    img:'images/index_banner.jpg'
                }
            ],
                imgWidth:600,
                currentIndex:1,
                distance:-600,//移动距离
                transitionEnd: true,
                speed: this.initialSpeed

        },

            props: {
                initialSpeed: {
                    type: Number,
                    default: 30
                },
                initialInterval: {
                    type: Number,
                    default: 4
                }
            },

        computed:{
            containerStyle() {//这里用了计算属性，用transform来移动整个图片列表
                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>