Question

我有一些滑块代码：

var myIndex = 0;
carousel();

function carousel() {
    var i;
    var x = document.getElementsByClassName("mySlides");
    for (i = 0; i < x.length; i++) {
       x[i].style.display = "none";  
    }
    myIndex++;
    if (myIndex > x.length) {myIndex = 1}    
    x[myIndex-1].style.display = "block";  
    setTimeout(carousel, 2500);    
}

CSS：

.mySlides {

    display:none;

    width: 100%;
    height: 100%;

    }
    .w3-animate-right{
        position:relative;
        -webkit-animation:animateright 0.9s;
        animation:animateright 0.9s;
    }
    @-webkit-keyframes animateright{
        from{right:-700px; display: none;} to{right:0; display: block;}
    }
    @keyframes animateright{
        from{right:-700px; display: none;} to{right:0; display: block;}
    }

现在正如您从css图像中看到的那样来自-700px，因为滑块width is 700px但是我试图让它显示：none对于不在滑块框内的图像部分。我通过在滑块旁边放置不可见的“墙”，使其具有更大的z索引并在其下滑动图像来实现。但如果可能，我想在没有它的情况下这样做。我将添加一些油漆图片，我希望它是...

img

Answer 1

最佳做法是使用overflow: hidden; css属性将div中的所有内容隐藏起来。

可以在this page找到更多信息。

Answer 2

您可以使用overflow: hidden创建CSS轮播。确切的结构可以在这里找到：

https://dl.dropboxusercontent.com/u/2629908/sandbox/fluid-css-carousel/index.html

显示和隐藏img

2 个答案: