我在创建幻灯片时遇到两个问题。我的第一个问题是我的后箭头不起作用。所以当我点击它时没有任何反应。我的第二个问题是我试图让这个幻灯片无限。我的意思是,当你到幻灯片结束时(在幻灯片17上)我希望下一个按钮带你回到图像编号1.我以为我在每张幻灯片上都有“下一个”和“上一个”,把它带回原来的图像(图像17的下一张图像是图像1),但唉,它没有用。
**顺便说一下,我实际上并没有制作小狗幻灯片(但这样会更有趣吗?)。
.slides {
padding: 0;
width: 609px;
height: 420px;
display: block;
margin: 0 auto;
position: relative;
box-shadow: 10px 10px 5px #888888;
}
.slides * {
user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
}
.slides input { display: none; }
.slide-container { display: block; }
.slide {
top: 0;
opacity: 0;
width: 609px;
height: 420px;
display: block;
position: absolute;
transform: scale(0);
transition: all .7s ease-in-out;
}
.slide img {
width: 100%;
height: 100%;
}
.nav label {
width: 200px;
height: 100%;
display: none;
position: absolute;
opacity: 0;
z-index: 9;
cursor: pointer;
transition: opacity .2s;
color: #FFF;
font-size: 156pt;
text-align: center;
line-height: 380px;
font-family: "Varela Round", sans-serif;
background-color: rgba(255, 255, 255, .3);
text-shadow: 0px 0px 15px rgb(119, 119, 119);
}
.slide:hover + .nav label { opacity: 0.5; }
.nav label:hover { opacity: 1; }
.nav .next { right: 0; }
input:checked + .slide-container .slide {
opacity: 1;
transform: scale(1);
transition: opacity 1s ease-in-out;
}
input:checked + .slide-container .nav label { display: block; }
}
<ul class="slides">
<input type="radio" id="img-1" checked>
<li class="slide-container">
<div class="slide">
<img src="http://www.windowsmode.com/wp-content/uploads/2015/08/Cute-Black-Dog.jpg">
</div>
<div class="nav">
<label for="img-17" class="prev">‹</label>
<label for="img-2" class="next">›</label>
</div>
</li>
<input type="radio" id="img-2">
<li class="slide-container">
<div class="slide">
<img src="http://cdn-www.dailypuppy.com/dog-images/riley-the-golden-retriever_61755_2016-09-27_w450.jpg">
</div>
<div class="nav">
<label for="img-1" class="prev">‹</label>
<label for="img-3" class="next">›</label>
</div>
</li>
<input type="radio" id="img-3">
<li class="slide-container">
<div class="slide">
<img src="http://www.adog.co.uk/dog-pictures/dogs-085.jpg">
</div>
<div class="nav">
<label for="img-2" class="prev">‹</label>
<label for="img-4" class="next">›</label>
</div>
</li>
<input type="radio" id="img-4">
<li class="slide-container">
<div class="slide">
<img src="https://peopledotcom.files.wordpress.com/2017/05/downward-dog-3.jpg?w=2000&h=1334">
</div>
<div class="nav">
<label for="img-3" class="prev">‹</label>
<label for="img-5" class="next">›</label>
</div>
</li>
<input type="radio" id="img-5">
<li class="slide-container">
<div class="slide">
<img src="http://cdn.akc.org/content/hero/famous_dog_names_header_.jpg">
</div>
<div class="nav">
<label for="img-4" class="prev">‹</label>
<label for="img-6" class="next">›</label>
</div>
</li>
<input type="radio" id="img-6">
<li class="slide-container">
<div class="slide">
<img src="http://www.dogster.com/wp-content/uploads/2017/01/laryngeal-paralysis-in-dogs.jpg">
</div>
<div class="nav">
<label for="img-5" class="prev">‹</label>
<label for="img-7" class="next">›</label>
</div>
</li>
<input type="radio" id="img-7">
<li class="slide-container">
<div class="slide">
<img src="http://www.wallpaperstop.com/wallpapers/animal-wallpapers/dog-wallpapers/dog-picture-1280x1024-0010.jpg">
</div>
<div class="nav">
<label for="img-6" class="prev">‹</label>
<label for="img-8" class="next">›</label>
</div>
</li>
<input type="radio" id="img-8">
<li class="slide-container">
<div class="slide">
<img src="https://karinalyudmilova.files.wordpress.com/2014/12/dogs.png">
</div>
<div class="nav">
<label for="img-7" class="prev">‹</label>
<label for="img-9" class="next">›</label>
</div>
</li>
<input type="radio" id="img-9">
<li class="slide-container">
<div class="slide">
<img src="http://ichef.bbci.co.uk/news/1024/cpsprodpb/E178/production/_91002775_dogspl.jpg">
</div>
<div class="nav">
<label for="img-8" class="prev">‹</label>
<label for="img-10" class="next">›</label>
</div>
</li>
<input type="radio" id="img-10">
<li class="slide-container">
<div class="slide">
<img src="http://www.petinsurance.com/images/VSSimages/consumer/v5/banner_dog_insurance.jpg">
</div>
<div class="nav">
<label for="img-9" class="prev">‹</label>
<label for="img-11" class="next">›</label>
</div>
</li>
<input type="radio" id="img-11">
<li class="slide-container">
<div class="slide">
<img src="https://www.petmd.com/sites/default/files/petmd-teacup-dogs.jpg">
</div>
<div class="nav">
<label for="img-10" class="prev">‹</label>
<label for="img-12" class="next">›</label>
</div>
</li>
<input type="radio" id="img-12">
<li class="slide-container">
<div class="slide">
<img src="https://tse1.mm.bing.net/th?id=OIP.TRIchMXZiuFXfm-845GdYgEsDI&pid=15.1&P=0&w=247&h=165">
</div>
<div class="nav">
<label for="img-11" class="prev">‹</label>
<label for="img-13" class="next">›</label>
</div>
</li>
<input type="radio" id="img-13">
<li class="slide-container">
<div class="slide">
<img src="http://www.dw.com/image/36553143_303.jpg">
</div>
<div class="nav">
<label for="img-12" class="prev">‹</label>
<label for="img-14" class="next">›</label>
</div>
</li>
<input type="radio" id="img-14">
<li class="slide-container">
<div class="slide">
<img src="http://www.pets4homes.co.uk/images/articles/1362/large/the-five-main-reasons-behind-why-dogs-bite-52ff9d965af7b.jpg">
</div>
<div class="nav">
<label for="img-13" class="prev">‹</label>
<label for="img-15" class="next">›</label>
</div>
</li>
<input type="radio" id="img-15">
<li class="slide-container">
<div class="slide">
<img src="http://www.greenfieldanimalhospital.com/clients/10589/images/dog.jpg">
</div>
<div class="nav">
<label for="img-14" class="prev">‹</label>
<label for="img-16" class="next">›</label>
</div>
</li>
<input type="radio" id="img-16">
<li class="slide-container">
<div class="slide">
<img src="https://tse4.mm.bing.net/th?id=OIP.mLgGlpjW8HZi4RWHm5oGigEsCp&pid=15.1&P=0&w=299&h=170">
</div>
<div class="nav">
<label for="img-15" class="prev">‹</label>
<label for="img-17" class="next">›</label>
</div>
</li>
<input type="radio" id="img-17">
<li class="slide-container">
<div class="slide">
<img src="http://www.adog.co.uk/dog-pictures/dogs-068.jpg">
</div>
<div class="nav">
<label for="img-16" class="prev">‹</label>
<label for="img-1" class="next">›</label>
</div>
</li>
</ul>
答案 0 :(得分:1)
您必须为收音机按钮命名。
这是JSFiddle工作:https://jsfiddle.net/fpjm0ver/
或者,如果您愿意,可以使用代码段。
.slides {
padding: 0;
width: 609px;
height: 420px;
display: block;
margin: 0 auto;
position: relative;
box-shadow: 10px 10px 5px #888888;
}
.slides * {
user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
}
.slides input {
display: none;
}
.slide-container {
display: block;
}
.slide {
top: 0;
opacity: 0;
width: 609px;
height: 420px;
display: block;
position: absolute;
transform: scale(0);
transition: all .7s ease-in-out;
}
.slide img {
width: 100%;
height: 100%;
}
.nav label {
width: 200px;
height: 100%;
display: none;
position: absolute;
opacity: 0;
z-index: 9;
cursor: pointer;
transition: opacity .2s;
color: #FFF;
font-size: 156pt;
text-align: center;
line-height: 380px;
font-family: "Varela Round", sans-serif;
background-color: rgba(255, 255, 255, .3);
text-shadow: 0px 0px 15px rgb(119, 119, 119);
}
.slide:hover + .nav label {
opacity: 0.5;
}
.nav label:hover {
opacity: 1;
}
.nav .next {
right: 0;
}
input:checked + .slide-container .slide {
opacity: 1;
transform: scale(1);
transition: opacity 1s ease-in-out;
}
input:checked + .slide-container .nav label {
display: block;
}
}
&#13;
<ul class="slides">
<input name="carousel" type="radio" id="img-1" checked>
<li class="slide-container">
<div class="slide">
<img src="http://www.windowsmode.com/wp-content/uploads/2015/08/Cute-Black-Dog.jpg">
</div>
<div class="nav">
<label for="img-17" class="prev">‹</label>
<label for="img-2" class="next">›</label>
</div>
</li>
<input name="carousel" type="radio" id="img-2">
<li class="slide-container">
<div class="slide">
<img src="http://cdn-www.dailypuppy.com/dog-images/riley-the-golden-retriever_61755_2016-09-27_w450.jpg">
</div>
<div class="nav">
<label for="img-1" class="prev">‹</label>
<label for="img-3" class="next">›</label>
</div>
</li>
<input name="carousel" type="radio" id="img-3">
<li class="slide-container">
<div class="slide">
<img src="http://www.adog.co.uk/dog-pictures/dogs-085.jpg">
</div>
<div class="nav">
<label for="img-2" class="prev">‹</label>
<label for="img-4" class="next">›</label>
</div>
</li>
<input name="carousel" type="radio" id="img-4">
<li class="slide-container">
<div class="slide">
<img src="https://peopledotcom.files.wordpress.com/2017/05/downward-dog-3.jpg?w=2000&h=1334">
</div>
<div class="nav">
<label for="img-3" class="prev">‹</label>
<label for="img-5" class="next">›</label>
</div>
</li>
<input name="carousel" type="radio" id="img-5">
<li class="slide-container">
<div class="slide">
<img src="http://cdn.akc.org/content/hero/famous_dog_names_header_.jpg">
</div>
<div class="nav">
<label for="img-4" class="prev">‹</label>
<label for="img-6" class="next">›</label>
</div>
</li>
<input name="carousel" type="radio" id="img-6">
<li class="slide-container">
<div class="slide">
<img src="http://www.dogster.com/wp-content/uploads/2017/01/laryngeal-paralysis-in-dogs.jpg">
</div>
<div class="nav">
<label for="img-5" class="prev">‹</label>
<label for="img-7" class="next">›</label>
</div>
</li>
<input name="carousel" type="radio" id="img-7">
<li class="slide-container">
<div class="slide">
<img src="http://www.wallpaperstop.com/wallpapers/animal-wallpapers/dog-wallpapers/dog-picture-1280x1024-0010.jpg">
</div>
<div class="nav">
<label for="img-6" class="prev">‹</label>
<label for="img-8" class="next">›</label>
</div>
</li>
<input name="carousel" type="radio" id="img-8">
<li class="slide-container">
<div class="slide">
<img src="https://karinalyudmilova.files.wordpress.com/2014/12/dogs.png">
</div>
<div class="nav">
<label for="img-7" class="prev">‹</label>
<label for="img-9" class="next">›</label>
</div>
</li>
<input name="carousel" type="radio" id="img-9">
<li class="slide-container">
<div class="slide">
<img src="http://ichef.bbci.co.uk/news/1024/cpsprodpb/E178/production/_91002775_dogspl.jpg">
</div>
<div class="nav">
<label for="img-8" class="prev">‹</label>
<label for="img-10" class="next">›</label>
</div>
</li>
<input name="carousel" type="radio" id="img-10">
<li class="slide-container">
<div class="slide">
<img src="http://www.petinsurance.com/images/VSSimages/consumer/v5/banner_dog_insurance.jpg">
</div>
<div class="nav">
<label for="img-9" class="prev">‹</label>
<label for="img-11" class="next">›</label>
</div>
</li>
<input name="carousel" type="radio" id="img-11">
<li class="slide-container">
<div class="slide">
<img src="https://www.petmd.com/sites/default/files/petmd-teacup-dogs.jpg">
</div>
<div class="nav">
<label for="img-10" class="prev">‹</label>
<label for="img-12" class="next">›</label>
</div>
</li>
<input name="carousel" type="radio" id="img-12">
<li class="slide-container">
<div class="slide">
<img src="https://tse1.mm.bing.net/th?id=OIP.TRIchMXZiuFXfm-845GdYgEsDI&pid=15.1&P=0&w=247&h=165">
</div>
<div class="nav">
<label for="img-11" class="prev">‹</label>
<label for="img-13" class="next">›</label>
</div>
</li>
<input name="carousel" type="radio" id="img-13">
<li class="slide-container">
<div class="slide">
<img src="http://www.dw.com/image/36553143_303.jpg">
</div>
<div class="nav">
<label for="img-12" class="prev">‹</label>
<label for="img-14" class="next">›</label>
</div>
</li>
<input name="carousel" type="radio" id="img-14">
<li class="slide-container">
<div class="slide">
<img src="http://www.pets4homes.co.uk/images/articles/1362/large/the-five-main-reasons-behind-why-dogs-bite-52ff9d965af7b.jpg">
</div>
<div class="nav">
<label for="img-13" class="prev">‹</label>
<label for="img-15" class="next">›</label>
</div>
</li>
<input name="carousel" type="radio" id="img-15">
<li class="slide-container">
<div class="slide">
<img src="http://www.greenfieldanimalhospital.com/clients/10589/images/dog.jpg">
</div>
<div class="nav">
<label for="img-14" class="prev">‹</label>
<label for="img-16" class="next">›</label>
</div>
</li>
<input name="carousel" type="radio" id="img-16">
<li class="slide-container">
<div class="slide">
<img src="https://tse4.mm.bing.net/th?id=OIP.mLgGlpjW8HZi4RWHm5oGigEsCp&pid=15.1&P=0&w=299&h=170">
</div>
<div class="nav">
<label for="img-15" class="prev">‹</label>
<label for="img-17" class="next">›</label>
</div>
</li>
<input name="carousel" type="radio" id="img-17">
<li class="slide-container">
<div class="slide">
<img src="http://www.adog.co.uk/dog-pictures/dogs-068.jpg">
</div>
<div class="nav">
<label for="img-16" class="prev">‹</label>
<label for="img-1" class="next">›</label>
</div>
</li>
</ul>
&#13;
没有名字,每个收音机都是不同的。