html - 为什么我不能将新幻灯片添加到我的纯 css 幻灯片中？

标签 html css slideshow

这是我的代码，当我用 5 张图片运行它时它工作正常。现在，当我添加第 6 张图片时，它不再起作用了。它以某种方式在第 1 张幻灯片中显示图像或在第 5 张幻灯片中显示更大的图像。试了很多东西都弄不明白。我以为那是花车，但事实并非如此，所以我不知道了。箭头没有出现，所以我使用了白框 :)。

这是我的 CSS 和 HTML: 

.sp-slideshow {
    position: relative;
    margin: 10px auto;
    width: 65%;
    max-width: 1000px;
    min-width: 260px;
    height: 60%;
    border: 10px solid #fff;
    border: 10px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.sp-content {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.sp-slideshow input {
    position: absolute;
    bottom: 15px;
    left: 50%;
    width: 9px;
    height: 9px;
    z-index: 1001;
    cursor: pointer;
    opacity: 0;
}

.sp-slideshow input+label {
    position: absolute;
    bottom: 15px;
    left: 50%;
    width: 6px;
    height: 6px;
    display: block;
    z-index: 1000;
    border: 3px solid #fff;
    border: 3px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    transition: background-color linear 0.1s;
}

.sp-slideshow input:checked+label {
    background-color: #fff;
    background-color: rgba(255, 255, 255, 0.9);
}

.sp-selector-1,
.button-label-1 {
    margin-left: -36px;
}

.sp-selector-2,
.button-label-2 {
    margin-left: -18px;
}

.sp-selector-4,
.button-label-4 {
    margin-left: 18px;
}

.sp-selector-5,
.button-label-5 {
    margin-left: 36px;
}

.sp-selector-6,
.button-label-6 {
    margin-left: 54px;
}

.sp-arrow {
    position: absolute;
    top: 50%;
    width: 28px;
    height: 38px;
    margin-top: -19px;
    display: none;
    
    cursor: pointer;
    z-index: 1000;
    background: transparent url(arrows.png) no-repeat;
    background-color:white;
    transition: opacity linear 0.3s;
}

.sp-arrow:hover {
    opacity: 1;
}

.sp-arrow:active {
    margin-top: -18px;
}

.sp-selector-1:checked~.sp-arrow.sp-a2,
.sp-selector-2:checked~.sp-arrow.sp-a3,
.sp-selector-3:checked~.sp-arrow.sp-a4,
.sp-selector-4:checked~.sp-arrow.sp-a5,
.sp-selector-5:checked~.sp-arrow.sp-a6 {
    right: 15px;
    display: block;
    background-position: top right;
}

.sp-selector-2:checked~.sp-arrow.sp-a1,
.sp-selector-3:checked~.sp-arrow.sp-a2,
.sp-selector-4:checked~.sp-arrow.sp-a3,
.sp-selector-5:checked~.sp-arrow.sp-a4,
.sp-selector-6:checked~.sp-arrow.sp-a5 {
    left: 15px;
    display: block;
    background-position: top left;
}

input.sp-selector-1:checked~.sp-content {
    background-position: 0 0;
    background-color: lightblue;
}

input.sp-selector-2:checked~.sp-content {
    background-position: -100px 0;
    background-color: lightcoral;
}

input.sp-selector-3:checked~.sp-content {
    background-position: -200px 0;
    background-color: lightgoldenrodyellow;
}

input.sp-selector-4:checked~.sp-content {
    background-position: -300px 0;
    background-color: lightgreen;
}

input.sp-selector-5:checked~.sp-content {
    background-position: -400px 0;
    background-color: lightpink;
}

input.sp-selector-6:checked~.sp-content {
    background-position: -500px 0;
    background-color: red;
}

.sp-slider {
    position: relative;
    left: 0;
    width: 500%;
    height: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
    transition: left ease-in 0.8s;
}

.sp-slider>li {
    color: #fff;
    width: 20%;
    box-sizing: border-box;
    float: left;
    text-align: center;
    position: relative;
}

.sp-slider>li img {
    box-sizing: border-box;
    display: block;
    margin: 0 auto;
    max-height: 100%;
    max-width: 100%;
}

input.sp-selector-1:checked~.sp-content .sp-slider {
    left: 0;
}

input.sp-selector-2:checked~.sp-content .sp-slider {
    left: -100%;
}

input.sp-selector-3:checked~.sp-content .sp-slider {
    left: -200%;
}

input.sp-selector-4:checked~.sp-content .sp-slider {
    left: -300%;
}

input.sp-selector-5:checked~.sp-content .sp-slider {
    left: -400%;
}

input.sp-selector-6:checked~.sp-content .sp-slider {
    left: -500%;
}

input.sp-selector-1:checked~.sp-content .sp-slider>li:first-child,
input.sp-selector-2:checked~.sp-content .sp-slider>li:nth-child(2),
input.sp-selector-3:checked~.sp-content .sp-slider>li:nth-child(3),
input.sp-selector-4:checked~.sp-content .sp-slider>li:nth-child(4),
input.sp-selector-5:checked~.sp-content .sp-slider>li:nth-child(5),
input.sp-selector-6:checked~.sp-content .sp-slider>li:nth-child(6) {
    opacity: 1;
}
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<link rel="stylesheet" href="ImageHomePage.css">
	<title>Document</title>
</head>

<body>
	<p>Hoi</p>
	<div class="sp-slideshow">

		<input id="button-1" type="radio" name="radio-set" class="sp-selector-1" checked="checked" />
		<label for="button-1" class="button-label-1"></label>

		<input id="button-2" type="radio" name="radio-set" class="sp-selector-2" />
		<label for="button-2" class="button-label-2"></label>

		<input id="button-3" type="radio" name="radio-set" class="sp-selector-3" />
		<label for="button-3" class="button-label-3"></label>

		<input id="button-4" type="radio" name="radio-set" class="sp-selector-4" />
		<label for="button-4" class="button-label-4"></label>
		
		<input id="button-5" type="radio" name="radio-set" class="sp-selector-5" />
		<label for="button-5" class="button-label-5"></label>

		<input id="button-6" type="radio" name="radio-set" class="sp-selector-6" />
		<label for="button-6" class="button-label-6"></label>




		<label for="button-1" class="sp-arrow sp-a1"></label>
		<label for="button-2" class="sp-arrow sp-a2"></label>
		<label for="button-3" class="sp-arrow sp-a3"></label>
		<label for="button-4" class="sp-arrow sp-a4"></label>
		<label for="button-5" class="sp-arrow sp-a5"></label>
		<label for="button-6" class="sp-arrow sp-a6"></label>

		<div class="sp-content">
			<ul class="sp-slider clearfix">
				<li><img src="http://www.mulierchile.com/random-image/random-image-013.jpg" alt="image01" /></li>
				<li><img src="http://www.mulierchile.com/random-image/random-image-013.jpg" alt="image02" /></li>
				<li><img src="http://www.mulierchile.com/random-image/random-image-013.jpg" alt="image03" /></li>
				<li><img src="http://www.mulierchile.com/random-image/random-image-013.jpg" alt="image04" /></li>
				<li><img src="http://www.mulierchile.com/random-image/random-image-013.jpg" alt="image05" /></li>
        <li><img src="http://www.mulierchile.com/random-image/random-image-013.jpg" alt="image06"/></li>
				
			</ul>
		</div>
		<!-- sp-content -->

	</div>
	<!-- sp-slideshow -->

	</div>
</body>

</html>

最佳答案

6 张图片应该占容器的 600%

6张图片应该占每个容器的16.66%

.sp-slider {
    position: relative;
    left: 0;
    width: 600%;/* ============  6 images of 100% width */
    height: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
    transition: left ease-in 0.8s;
}

.sp-slider > li {
  color: #fff;
  width: 16.66%;/* =====!  X6 = 100% width of parent container */
  box-sizing: border-box;
  float: left;
  text-align: center;
  position: relative;
}


.sp-slideshow {
    position: relative;
    margin: 10px auto;
    width: 65%;
    max-width: 1000px;
    min-width: 260px;
    height: 60%;
    border: 10px solid #fff;
    border: 10px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.sp-content {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.sp-slideshow input {
    position: absolute;
    bottom: 15px;
    left: 50%;
    width: 9px;
    height: 9px;
    z-index: 1001;
    cursor: pointer;
    opacity: 0;
}

.sp-slideshow input+label {
    position: absolute;
    bottom: 15px;
    left: 50%;
    width: 6px;
    height: 6px;
    display: block;
    z-index: 1000;
    border: 3px solid #fff;
    border: 3px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    transition: background-color linear 0.1s;
}

.sp-slideshow input:checked+label {
    background-color: #fff;
    background-color: rgba(255, 255, 255, 0.9);
}

.sp-selector-1,
.button-label-1 {
    margin-left: -36px;
}

.sp-selector-2,
.button-label-2 {
    margin-left: -18px;
}

.sp-selector-4,
.button-label-4 {
    margin-left: 18px;
}

.sp-selector-5,
.button-label-5 {
    margin-left: 36px;
}

.sp-selector-6,
.button-label-6 {
    margin-left: 54px;
}

.sp-arrow {
    position: absolute;
    top: 50%;
    width: 28px;
    height: 38px;
    margin-top: -19px;
    display: none;
    
    cursor: pointer;
    z-index: 1000;
    background: transparent url(arrows.png) no-repeat;
    background-color:white;
    transition: opacity linear 0.3s;
}

.sp-arrow:hover {
    opacity: 1;
}

.sp-arrow:active {
    margin-top: -18px;
}

.sp-selector-1:checked~.sp-arrow.sp-a2,
.sp-selector-2:checked~.sp-arrow.sp-a3,
.sp-selector-3:checked~.sp-arrow.sp-a4,
.sp-selector-4:checked~.sp-arrow.sp-a5,
.sp-selector-5:checked~.sp-arrow.sp-a6 {
    right: 15px;
    display: block;
    background-position: top right;
}

.sp-selector-2:checked~.sp-arrow.sp-a1,
.sp-selector-3:checked~.sp-arrow.sp-a2,
.sp-selector-4:checked~.sp-arrow.sp-a3,
.sp-selector-5:checked~.sp-arrow.sp-a4,
.sp-selector-6:checked~.sp-arrow.sp-a5 {
    left: 15px;
    display: block;
    background-position: top left;
}

input.sp-selector-1:checked~.sp-content {
    background-position: 0 0;
    background-color: lightblue;
}

input.sp-selector-2:checked~.sp-content {
    background-position: -100px 0;
    background-color: lightcoral;
}

input.sp-selector-3:checked~.sp-content {
    background-position: -200px 0;
    background-color: lightgoldenrodyellow;
}

input.sp-selector-4:checked~.sp-content {
    background-position: -300px 0;
    background-color: lightgreen;
}

input.sp-selector-5:checked~.sp-content {
    background-position: -400px 0;
    background-color: lightpink;
}

input.sp-selector-6:checked~.sp-content {
    background-position: -500px 0;
    background-color: red;
}

.sp-slider {
    position: relative;
    left: 0;
    width: 600%;/* ============  6 images of 100% width */
    height: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
    transition: left ease-in 0.8s;
}

.sp-slider > li {
  color: #fff;
  width: 16.66%;/* =====!  X6 = 100% width of parent container */
  box-sizing: border-box;
  float: left;
  text-align: center;
  position: relative;
}

.sp-slider>li img {
    box-sizing: border-box;
    display: block;
    margin: 0 auto;
    max-height: 100%;
    max-width: 100%;
}

input.sp-selector-1:checked~.sp-content .sp-slider {
    left: 0;
}

input.sp-selector-2:checked~.sp-content .sp-slider {
    left: -100%;
}

input.sp-selector-3:checked~.sp-content .sp-slider {
    left: -200%;
}

input.sp-selector-4:checked~.sp-content .sp-slider {
    left: -300%;
}

input.sp-selector-5:checked~.sp-content .sp-slider {
    left: -400%;
}

input.sp-selector-6:checked~.sp-content .sp-slider {
    left: -500%;
}

input.sp-selector-1:checked~.sp-content .sp-slider>li:first-child,
input.sp-selector-2:checked~.sp-content .sp-slider>li:nth-child(2),
input.sp-selector-3:checked~.sp-content .sp-slider>li:nth-child(3),
input.sp-selector-4:checked~.sp-content .sp-slider>li:nth-child(4),
input.sp-selector-5:checked~.sp-content .sp-slider>li:nth-child(5),
input.sp-selector-6:checked~.sp-content .sp-slider>li:nth-child(5) {
    opacity: 1;
}
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<link rel="stylesheet" href="ImageHomePage.css">
	<title>Document</title>
</head>

<body>
	<p>Hoi</p>
	<div class="sp-slideshow">

		<input id="button-1" type="radio" name="radio-set" class="sp-selector-1" checked="checked" />
		<label for="button-1" class="button-label-1"></label>

		<input id="button-2" type="radio" name="radio-set" class="sp-selector-2" />
		<label for="button-2" class="button-label-2"></label>

		<input id="button-3" type="radio" name="radio-set" class="sp-selector-3" />
		<label for="button-3" class="button-label-3"></label>

		<input id="button-4" type="radio" name="radio-set" class="sp-selector-4" />
		<label for="button-4" class="button-label-4"></label>
		
		<input id="button-5" type="radio" name="radio-set" class="sp-selector-5" />
		<label for="button-5" class="button-label-5"></label>

		<input id="button-6" type="radio" name="radio-set" class="sp-selector-6" />
		<label for="button-6" class="button-label-6"></label>




		<label for="button-1" class="sp-arrow sp-a1"></label>
		<label for="button-2" class="sp-arrow sp-a2"></label>
		<label for="button-3" class="sp-arrow sp-a3"></label>
		<label for="button-4" class="sp-arrow sp-a4"></label>
		<label for="button-5" class="sp-arrow sp-a5"></label>
		<label for="button-6" class="sp-arrow sp-a6"></label>

		<div class="sp-content">
			<ul class="sp-slider clearfix">
				<li><img src="http://www.mulierchile.com/random-image/random-image-013.jpg" alt="image01" /></li>
				<li><img src="http://www.mulierchile.com/random-image/random-image-013.jpg" alt="image02" /></li>
				<li><img src="http://www.mulierchile.com/random-image/random-image-013.jpg" alt="image03" /></li>
				<li><img src="http://www.mulierchile.com/random-image/random-image-013.jpg" alt="image04" /></li>
				<li><img src="http://www.mulierchile.com/random-image/random-image-013.jpg" alt="image05" /></li>
        <li><img src="http://www.mulierchile.com/random-image/random-image-013.jpg" alt="image06"/></li>
				
			</ul>
		</div>
		<!-- sp-content -->

	</div>
	<!-- sp-slideshow -->

	</div>
</body>

</html>

关于html - 为什么我不能将新幻灯片添加到我的纯 css 幻灯片中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46796745/

上一篇：javascript - 单击链接(在移动屏幕上)后，如何关闭菜单？

下一篇：html - 使用背景图片在两个元素之间绘制点

相关文章：

html - CSS 表格背景是圆形的，但边框是方形的

angular - 如果 CSS-Grid 的元素是 Angular 组件，则 CSS-Grid 不起作用

javascript - jQuery 幻灯片 + 单击放大(LightBox 和 ColorBox)

javascript - jQuery:幻灯片的自定义分页

javascript - 幻灯片放映不工作

jquery - 单击外部时如何隐藏div

html - 阻止 flex 对齐元素破坏溢出自动

javascript - 如何在数组中更深一层

jquery - 调试 CSS 下拉菜单 jQuery 动画

html - 当父级没有固定宽度时，子级的高度为 100%

©2024 IT工具网  联系我们