Question

我目前正在使用带有scrollHorz的Cycle2全屏（100％宽度和高度），背景图片的大小为“覆盖”，除了页面上没有回调或其他内容因此它是一个非常基本的滑块

我发现当浏览器太大时，幻灯片过渡会出现锯齿状，不平滑。然而，当屏幕较小时，它会更好一些。我也没有遇到任何'淡入淡出'的问题，或者至少它没有明显的问题。

我尝试过缓和和速度的各种组合，但没有太多运气。

我不确定它是一个css的东西还是一个cycle2的东西，而且我无法通过谷歌找到类似的问题，有人可以对此有所了解吗？

HTML

<ul id="homepage-carousel" class="hero">
    <li class="homepage-carousel-item" style="background-image: url('hero1.jpg');">
        <div class="homepage-carousel-info">
            <h1 class="homepage-carousel-title">Title</h1>              
            <h2 class="homepage-carousel-subtitle">Subtitle</h2>                
            <div class="homepage-carousel-desc">
                <p>some info here</p>
            </div>                                  
            <div class="homepage-carousel-link"><a class="homepage-carousel-url" href="#" title=""><span>Read More</span></a></div> 
        </div>
    </li>
    <li class="homepage-carousel-item" style="background-image: url('hero2.jpg');">
        <div class="homepage-carousel-info">
            <h1 class="homepage-carousel-title">Title</h1>              
            <h2 class="homepage-carousel-subtitle">Subtitle</h2>                
            <div class="homepage-carousel-desc">
                <p>some info here</p>
            </div>                                  
            <div class="homepage-carousel-link"><a class="homepage-carousel-url" href="#" title=""><span>Read More</span></a></div> 
        </div>
    </li>
    <li class="homepage-carousel-item" style="background-image: url('hero3.jpg');">
        <div class="homepage-carousel-info">
            <h1 class="homepage-carousel-title">Title</h1>              
            <h2 class="homepage-carousel-subtitle">Subtitle</h2>                
            <div class="homepage-carousel-desc">
                <p>some info here</p>
            </div>                                  
            <div class="homepage-carousel-link"><a class="homepage-carousel-url" href="#" title=""><span>Read More</span></a></div> 
        </div>
    </li>
</ul>

CSS

#homepage-carousel {
    width: 100%;
    height: 100%;

    .homepage-carousel-item {
        height: 100%;
        background-repeat: none;
        background-position: top center;
        background-size: cover;
    }
}

Answer 1

这不是循环问题

background-size: cover表现糟糕。

您可以通过向幻灯片中添加transform: translate3d(0,0,0)来减轻痛苦，但它仍然会起伏不定。

用实际图像替换背景通常可以提高我的性能，例如this fiddle。但是，图像越大，任何浏览器的性能都越低;渲染大型动态影像对他们来说很难。

然后，这只是图像尺寸和位置的问题，因为你可以使用类似的东西：

.homepage-carousel-item > img, .homepage-carousel-info { position:absolute; }
.homepage-carousel-item > img {
    /*img size*/
    min-width:100%;
    min-height:100%;
    width:auto;
    height:auto;
    /*img pos*/
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);/*offset position based on img size*/
}

如果您需要支持旧版浏览器，那么您可以在图像中运行例程来调整大小并偏移like this does。

其他解决方案仅适用于某些浏览器（例如object-fit: cover），但这些选项应适用于所有浏览器。

Cycle2的scrollHorz在全屏图像上无法顺利运行

1 个答案: