[英]Show and hide img
I have some code for slider: 我有一些滑块代码:
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: 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;}
}
Now as you see from css image is coming from -700px
because slider width is 700px
But I am trying to make it display:none for image parts that are not inside the slider frame. 现在,正如您从CSS中看到的
-700px
由于滑块width is 700px
因此图像来自-700px
,但是我试图将其显示为:none,用于不在滑块框架内的图像部分。 I caan do it by putting invisible "walls" next to slider by making it with bigger z index and to slide image under it. 我通过在滑块旁边放置不可见的“墙壁”来实现此目的,方法是使它具有更大的z索引,并在其下滑动图像。 But I want to do it without that if it is possible.
但是,如果可能的话,我想做到这一点。 I will add some paint pic how I would like it to be...
我将添加一些绘画图片,我希望它是...
You can create a CSS carousel using overflow: hidden
. 您可以使用
overflow: hidden
创建一个CSS轮播。 The exact structure can be found, for example, here: 例如,可以在此处找到确切的结构:
https://dl.dropboxusercontent.com/u/2629908/sandbox/fluid-css-carousel/index.html https://dl.dropboxusercontent.com/u/2629908/sandbox/fluid-css-carousel/index.html
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.