我想在 vuejs 中的图像上悬停时开始幻灯片放映

debugcn 发表于 Dev

普拉文·西索迪亚

我在 index.html 文件中有一个主图像。在它下面，存在三个小缩略图。主图像将根据悬停的图像而变化。这工作得很好。现在，我想添加新功能，在第一次悬停后，图像会在 1 秒后自动更改（用于测试目的）。

我尝试的是在组件的 updateMainImage 方法中调用 setInterval 函数。索引号每秒都在变化，但图像没有变化。以下是相关的代码片段。

Vue component:
    data(){
    return {
        imagenumber: 0,
        image:'images/ims.jpg',
        slideshowimages: [
            {
                id: 1,
                img: 'images/ims.jpg',
            },
            {
                id: 2,
                img: 'images/ims2.jpg',
            },
            {
                id: 3,
                img: 'images/ims3.jpg',
            }
        ]
    }
},

方法

updateMainImage(img,index){
        this.image = img
        console.log(index)
        var timer= setInterval(function(){
            if(index<2){
                index++
                console.log(index)
                this.image= slideshowimages[index].img
            }
            else{
                index=0
                console.log(index)
            }
        },1000)
    }

模板

<div class="wrapperThumbnailforMainImage">
        <div class="thumbnailForMainImage" v-for="(image, index) in 
         slideshowimages" :key="image.id">
        <img :src="image.img" 
         @mouseover="updateMainImage(image.img,index)">
        </div>
    </div>

我希望显示相应索引号的图像。

比杰·亚达夫

查看更新的代码。

updateMainImage(img,index){
        this.image = img
        console.log(index)
        var timer= setInterval(function(){
            if(index<2){
                index++
                console.log(index)
                this.image= slideshowimages[index].img
            }
            else{
                index=0
                this.image= slideshowimages[index].img
                console.log(index)
            }
        },1000)
    }

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。