Question

我想隐藏溢出以隐藏幻灯片中的第二个图像（如果我不这样做，会在我的网站底部创建额外的空间）但是当我这样做时，它还隐藏了下一个箭头和prev ...如何将它们分开并仍保持箭头位置正确？

我如何让它们响应，让我们说使用百分比宽度而不是错位？抱歉很长的帖子。

请帮忙！谢谢。

这是幻灯片代码： HTML

<div class="diy-slideshow">
<figure class="show"> <img src="img/image1.jpg" width="100%" /></figure>
<figure><img src="img/image2.jpg" width="100%" /></figure> 
<span class="prev"><img src="prev.png" width="30px"/></span> <span class="next">
<img src="next.png" width="30px"/></span>
</figure>

CSS

.diy-slideshow {
position: relative;
display: block;
overflow: visible;
width: 90%;
margin-left: 5%;
margin-right: 5%;
}

figure{
position: absolute;
opacity: 0;
overflow: hidden;
transition: 1s opacity;
}
figure.show{
opacity: 1;
position: static;
overflow: hidden;
transition: 1s opacity;
}
.next, .prev{
color: #fff;
position: absolute;
top: 50%;
z-index: 1;
opacity: .5;
user-select: none;
}
.next:hover, .prev:hover{
cursor: pointer;
opacity: 1;
}
.next{
right: -4%;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.prev{
left: -4%;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}

的Javascript

<script language="JavaScript1.2">
(function(){

var counter = 0,
$items = document.querySelectorAll('.diy-slideshow figure'),
numItems = $items.length;

var showCurrent = function(){
var itemToShow = Math.abs(counter%numItems);

[].forEach.call( $items, function(el){
el.classList.remove('show');
});

$items[itemToShow].classList.add('show');
};

document.querySelector('.next').addEventListener('click', function() {
counter++;
showCurrent();
}, false);

document.querySelector('.prev').addEventListener('click', function() {
counter--;
showCurrent();
}, false);

})();
</script>

Answer 1

为什么不加上这个呢？

figure{
    /* your CSS */
    display:none;
}
figure.show{
    /* your CSS */
    display:block;
}

或者更好的解决方案（使用动画）只保留：

figure{
    position: absolute;
    opacity: 0;
    transition: 1s opacity;
}
figure.show{
    opacity: 1;
}

如何隐藏幻灯片上的溢出而不隐藏箭头？

1 个答案: