为什么我不能在我的纯css幻灯片中添加新幻灯片？

时间：2017-10-17 18:22:02

标签： html css slideshow

这是我的代码，当我用5张图片运行它时它可以正常工作。现在，当我添加第6张图片时，它再也无法使用了。它以某种方式显示第一张幻灯片中的图像或第五张幻灯片上的较大图像。试过很多事情都无法解决。我知道这是漂浮但不是因为我不知道了。箭头arrent出现所以我用白盒子:)。

这是我的css和html：

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：1)

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>

相关问题
最新问题