Question

这是我简单的css / javascript图片滑块；

<html>
<head>
<script>
function show_image(idx)
{
    if(!slider)
        return;

    slider.style.left = "-" + ((idx - 1) * 422) + "px";
}
</script>
<style>

div, img {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    border: 0;
}
.slideshow-mask{
    width: 422px;
    height: 155px;
    overflow: hidden;
}

.slideshow-image-container {
    position: relative;
    width: 5486;
    height:155px;
    transition-property: left;
    transition-duration: 1s;
}

.slideshow-image-container img {
    width: 422px;
    height:155px;
}

#slideshow-menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
#slideshow-menu li {
    display: inline;
}
</style>
</head>
<body>

<div class="slideshow-mask">
<div class="slideshow-image-container" id="slider">
<img src="frame1.png"/>
<img src="frame2.png"/>
<img src="frame3.png"/>
<img src="frame4.png"/>
<img src="frame5.png"/>
<img src="frame6.png"/>
<img src="frame7.png"/>
<img src="frame8.png"/>
<img src="frame9.png"/>
<img src="frame10.png"/>
<img src="frame11.png"/>
<img src="frame12.png"/>
<img src="frame13.png"/>
</div>

</div>
<ul class="slideshow-menu" id="slideshow-menu">
<li><a href="#" onclick="show_image(1)">1</a></li>
<li><a href="#" onclick="show_image(2)">2</a></li>
<li><a href="#" onclick="show_image(3)">3</a></li>
<li><a href="#" onclick="show_image(4)">4</a></li>
<li><a href="#" onclick="show_image(5)">5</a></li>
<li><a href="#" onclick="show_image(6)">6</a></li>
<li><a href="#" onclick="show_image(7)">7</a></li>
<li><a href="#" onclick="show_image(8)">8</a></li>
<li><a href="#" onclick="show_image(9)">9</a></li>
<li><a href="#" onclick="show_image(10)">10</a></li>
<li><a href="#" onclick="show_image(11)">11</a></li>
<li><a href="#" onclick="show_image(12)">12</a></li>
<li><a href="#" onclick="show_image(13)">13</a></li>
</ul>

</body>
</html>

上面的代码最初似乎可以正常工作，但是，随着人们获得更多图像，图像在裁剪区域中无法正确对齐。我认为它应该起作用，因为我清除了所有div和图像上的所有页边距，内边距和边框。我该如何解决这个问题？

Answer 1

在float: left样式中添加img，将消除图像之间的空白

OR

将display: flex添加到#slider容器中。

如何在裁剪的div中正确定位图像列表

1 个答案: