时间戳

首页 > 解决方案 > 如何解决此图像幻灯片的 css 问题？

html - 如何解决此图像幻灯片的 css 问题？

问题描述

当一个图像每次更改为另一个图像时，它会移动一点底部和右侧，并在动画后返回，直到下一个图像更改。这是简单的幻灯片。这是代码：

<div>
    <transition-group name='fade' tag='div'>
      <div v-for="n in [currentN]" :key='n'>
        <img :src="Image" />
      </div>
    </transition-group>
</div>

CSS

.fade-enter-active,
.fade-leave-active {
  transition: all 0.8s ease;
  overflow: hidden;
  visibility: visible;
  opacity: 1;
  position: absolute;
  width:100%
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
  visibility: hidden;
  width:100%
}

img {
  height:600px;
  width:100%
}

出了什么问题，如何解决该图像更改动画问题并始终保持图像的屏幕全宽和高度 600 像素而不改变其位置？

几天前我在 jsfiddle 中找到了它，并试图对其进行更改。

标签： htmlcss

解决方案

推荐解决方案

为宽度提供静态数字img将解决问题。从 更改100%为您喜欢的宽度px，如下所示：

img{
    height:200px;
    width:300px;
}

替代解决方案：

body{
  margin:0px;
}

这可以防止您的图像从网格中流出，并使您能够100%像最初一样在图像标签上使用。示例：https ://jsfiddle.net/L5y2hqua/

代码片段 

new Vue({
    el: 'image-slider',
    data: {
        images: ['http://i.imgur.com/vYdoAKu.jpg', 'http://i.imgur.com/PUD9HQL.jpg', 'http://i.imgur.com/Lfv18Sb.jpg', 'http://i.imgur.com/tmVJtna.jpg', 'http://i.imgur.com/ZfFAkWZ.jpg'],
        currentNumber: 0,
        timer: null
    },

    mounted: function () {
        this.startRotation();
    },

    methods: {
        startRotation: function() {
            this.timer = setInterval(this.next, 3000);
        },


        next: function() {
            this.currentNumber += 1
        },
        prev: function() {
            this.currentNumber -= 1
        }
    },
    
    computed: {
    	currentImage: function() {
      	return this.images[Math.abs(this.currentNumber) % this.images.length];
      }
    }
});
.fade-enter-active,
.fade-leave-active {
  transition: all 0.8s ease;
  overflow: hidden;
  visibility: visible;
  opacity: 1;
  position: absolute;
  width:100%;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
  visibility: hidden;
  width:100%;
}

img {
    height:200px;
    width:300px;
  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.6/vue.js"></script>
<body>

<div class="slider-wrapper">
<image-slider>
    
    <transition-group name='fade' tag='div'>
      <div
       v-for="number in [currentNumber]"
       :key='number'
       >
         <img
             :src="currentImage"
             />
    </div>
  </transition-group>
</image-slider>
</div>
</body>

推荐阅读