顯示和隱藏img

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因此圖像來自-700px ，但是我試圖將其顯示為：none，用於不在滑塊框架內的圖像部分。 我通過在滑塊旁邊放置不可見的“牆壁”來實現此目的，方法是使它具有更大的z索引，並在其下滑動圖像。 但是，如果可能的話，我想做到這一點。 我將添加一些繪畫圖片，我希望它是...

IMG

Answer 1

最佳實踐是使用以下overflow: hidden; css屬性可將div之外的所有內容隱藏。

可以在此頁面上找到更多信息。

Answer 2

您可以使用overflow: hidden創建一個CSS輪播。 例如，可以在此處找到確切的結構：

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