我试图在学校项目中使用图像滑块。当我在另一个.html文件中测试它时它工作得很好但是当我试图在我的项目中使用它时我得到一个黑色背景而不是我的图片......这是我的html和css代码
@font-face {
font-family: 'WebSymbolsRegular';
src: url('http://html5css3demos.bplaced.net/css3-slider-v3/websymbols-regular-webfont.eot');
src: url('http://html5css3demos.bplaced.net/css3-slider-v3/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'), url('http://html5css3demos.bplaced.net/css3-slider-v3/websymbols-regular-webfont.woff') format('woff'), url('http://html5css3demos.bplaced.net/css3-slider-v3/websymbols-regular-webfont.ttf') format('truetype'), url('http://html5css3demos.bplaced.net/css3-slider-v3/websymbols-regular-webfont#WebSymbolsRegular') format('svg');
}
@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,700);
#slideshow-wrap {
display: block;
height: 320px;
min-width: 260px;
max-width: 640px;
margin: auto;
border: 12px rgba(255, 255, 240, 1) solid;
-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, .8);
-moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, .8);
box-shadow: 0px 0px 5px rgba(0, 0, 0, .8);
margin-top: 20px;
position: relative;
}
#slideshow-inner {
width: 100%;
height: 100%;
background-color: rgb(0, 0, 0);
overflow: hidden;
position: relative;
}
#slideshow-inner>ul {
list-style: none;
height: 100%;
width: 500%;
overflow: hidden;
position: relative;
left: 0px;
-webkit-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
-moz-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
-o-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
}
#slideshow-inner>ul>li {
width: 20%;
height: 320px;
float: left;
position: relative;
}
#slideshow-inner>ul>li>img {
margin: auto;
height: 100%;
}
#slideshow-wrap input[type=radio] {
position: absolute;
left: 50%;
bottom: 15px;
z-index: 100;
visibility: hidden;
}
#slideshow-wrap label:not(.arrows):not(.show-description-label) {
position: absolute;
left: 50%;
bottom: -45px;
z-index: 100;
width: 12px;
height: 12px;
background-color: rgba(200, 200, 200, 1);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
cursor: pointer;
-webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, .8);
-moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, .8);
box-shadow: 0px 0px 3px rgba(0, 0, 0, .8);
-webkit-transition: background-color .2s;
-moz-transition: background-color .2s;
-o-transition: background-color .2s;
transition: background-color .2s;
}
#slideshow-wrap label:not(.arrows):active {
bottom: -46px
}
#slideshow-wrap input[type=radio]#button-1:checked~label[for=button-1] {
background-color: rgba(100, 100, 100, 1)
}
#slideshow-wrap input[type=radio]#button-2:checked~label[for=button-2] {
background-color: rgba(100, 100, 100, 1)
}
#slideshow-wrap input[type=radio]#button-3:checked~label[for=button-3] {
background-color: rgba(100, 100, 100, 1)
}
#slideshow-wrap input[type=radio]#button-4:checked~label[for=button-4] {
background-color: rgba(100, 100, 100, 1)
}
#slideshow-wrap input[type=radio]#button-5:checked~label[for=button-5] {
background-color: rgba(100, 100, 100, 1)
}
#slideshow-wrap label[for=button-1] {
margin-left: -36px
}
#slideshow-wrap label[for=button-2] {
margin-left: -18px
}
#slideshow-wrap label[for=button-4] {
margin-left: 18px
}
#slideshow-wrap label[for=button-5] {
margin-left: 36px
}
#slideshow-wrap input[type=radio]#button-1:checked~#slideshow-inner>ul {
left: 0
}
#slideshow-wrap input[type=radio]#button-2:checked~#slideshow-inner>ul {
left: -100%
}
#slideshow-wrap input[type=radio]#button-3:checked~#slideshow-inner>ul {
left: -200%
}
#slideshow-wrap input[type=radio]#button-4:checked~#slideshow-inner>ul {
left: -300%
}
#slideshow-wrap input[type=radio]#button-5:checked~#slideshow-inner>ul {
left: -400%
}
label.arrows {
font-family: 'WebSymbolsRegular';
font-size: 25px;
color: rgb(255, 255, 240);
position: absolute;
top: 50%;
margin-top: -25px;
display: none;
opacity: 0.7;
cursor: pointer;
z-index: 1000;
background-color: transparent;
-webkit-transition: opacity .2s;
-moz-transition: opacity .2s;
-o-transition: opacity .2s;
transition: opacity .2s;
text-shadow: 0px 0px 3px rgba(0, 0, 0, .8);
}
label.arrows:hover {
opacity: 1
}
label.arrows:active {
margin-top: -23px
}
input[type=radio]#button-1:checked~.arrows#arrow-2,
input[type=radio]#button-2:checked~.arrows#arrow-3,
input[type=radio]#button-3:checked~.arrows#arrow-4,
input[type=radio]#button-4:checked~.arrows#arrow-5 {
right: -55px;
display: block;
}
input[type=radio]#button-2:checked~.arrows#arrow-1,
input[type=radio]#button-3:checked~.arrows#arrow-2,
input[type=radio]#button-4:checked~.arrows#arrow-3,
input[type=radio]#button-5:checked~.arrows#arrow-4 {
left: -55px;
display: block;
-webkit-transform: scaleX(-1);
-moz-transform: scaleX(-1);
-ms-transform: scaleX(-1);
-o-transform: scaleX(-1);
transform: scaleX(-1);
}
input[type=radio]#button-2:checked~.arrows#arrow-1 {
left: -19px
}
input[type=radio]#button-3:checked~.arrows#arrow-2 {
left: -37px
}
input[type=radio]#button-5:checked~.arrows#arrow-4 {
left: -73px
}
.description {
position: absolute;
top: 0;
left: 0;
width: 260px;
font-family: 'Yanone Kaffeesatz';
z-index: 1000;
}
.description input {
visibility: hidden
}
.description label {
font-family: 'WebSymbolsRegular';
background-color: rgba(255, 255, 240, 1);
position: relative;
left: -17px;
top: 00px;
width: 40px;
height: 27px;
display: inline-block;
text-align: center;
padding-top: 7px;
border-bottom-right-radius: 15px;
cursor: pointer;
opacity: 0;
-webkit-transition: opacity .2s;
-moz-transition: opacity .2s;
-o-transition: opacity .2s;
transition: opacity .2s;
z-index: 5;
color: rgb(20, 20, 20);
}
#slideshow-inner>ul>li:hover .description label {
opacity: 1
}
.description input[type=checkbox]:checked~label {
opacity: 1
}
.description .description-text {
background-color: rgba(255, 255, 230, .5);
padding-left: 45px;
padding-top: 25px;
padding-right: 15px;
padding-bottom: 15px;
position: relative;
top: -35px;
z-index: 4;
opacity: 0;
-webkit-transition: opacity .2s;
-moz-transition: opacity .2s;
-o-transition: opacity .2s;
transition: opacity .2s;
color: rgb(20, 20, 20);
}
.description input[type=checkbox]:checked~.description-text {
opacity: 1
}<div id="work">
<div class="Jobs">
<br></br>
<h1 style="color:white;margin-left:10%">Here,see some piecies of our work!</h1>
<div id="slideshow-wrap">
<input type="radio" id="button-1" name="controls" checked="checked" />
<label for="button-1"></label>
<input type="radio" id="button-2" name="controls" />
<label for="button-2"></label>
<input type="radio" id="button-3" name="controls" />
<label for="button-3"></label>
<input type="radio" id="button-4" name="controls" />
<label for="button-4"></label>
<input type="radio" id="button-5" name="controls" />
<label for="button-5"></label>
<label for="button-1" class="arrows" id="arrow-1">></label>
<label for="button-2" class="arrows" id="arrow-2">></label>
<label for="button-3" class="arrows" id="arrow-3">></label>
<label for="button-4" class="arrows" id="arrow-4">></label>
<label for="button-5" class="arrows" id="arrow-5">></label>
<div id="slideshow-inner">
<ul>
<li id="slide1">
<img src="http://www.awwwards.com/awards/images/2014/08/dunckelfeld-website.jpg" style="width:100%;height:100% ;" />
<div class="description">
<input type="checkbox" id="show-description-1" />
<label for="show-description-1" class="show-description-label">INFO</label>
<div class="description-text">
<h2>DUNCKEFELD</h2>
<p>Project Name:"Dunckelfeld"<a href="http://www.dunckelfeld.de/en/">Visit Here</a>
</p>
</div>
</div>
</li>
<li id="slide2">
<img src="http://www.awwwards.com/awards/images/2014/04/devart-website.jpg" style="width:100%" />
<div class="description">
<input type="checkbox" id="show-description-2" />
<label for="show-description-2" class="show-description-label">INFO</label>
<div class="description-text">
<h2>DEVART</h2>
<p>Project Name:"DEVART" <a href="https://devart.withgoogle.com/">Visit Here</a>
</p>
</div>
</div>
</li>
<li id="slide3">
<img src="http://www.awwwards.com/awards/submissions/2015/02/54ef5f5139507.jpeg" style="width:100%" />
<div class="description">
<input type="checkbox" id="show-description-3" />
<label for="show-description-3" class="show-description-label">INFO</label>
<div class="description-text">
<h2>CRAFTED</h2>
<p>Project Name:"CRAFTED" <a href="http://opl.craftedny.com/">Visit Here</a>
</p>
</div>
</div>
</li>
<li id="slide4">
<img src="http://www.awwwards.com/awards/sites_of_the_day/2014/12/Volkswagen-electrique.jpg" style="width:100% height:100%" />
<div class="description">
<input type="checkbox" id="show-description-4" />
<label for="show-description-4" class="show-description-label">INFO</label>
<div class="description-text">
<h2>VOLKSWAGEN-ELECTRIQUE</h2>
<p>Project Name:"VOLKSWAGEN-ELECTRIQUE" <a href="http://volkswagen-electrique.fr/">Visit Here</a>
</p>
</div>
</div>
</li>
<li id="slide5">
<img src="http://www.awwwards.com/awards/sites_of_the_day/2015/01/vitosalvatore.jpg" style="width:100%" />
<div class="description">
<input type="checkbox" id="show-description-5" />
<label for="show-description-5" class="show-description-label">INFO</label>
<div class="description-text">
<h2>VITOSALVATOR</h2>
<p>Project Name:"VITOSALVATOR" <a href="http://www.vitosalvatore.com/">Visit Here</a>
</p>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
And my CSS file: style.c
有什么想法吗？ original image slider link
答案 0 :(得分：0)
您可以在简单的css中执行此操作
<强>＆GT;不需要任何javascript
@import url(http://fonts.googleapis.com/css?family=Varela+Round);
.slides {
padding: 0;
width: 609px;
height: 420px;
display: block;
margin: 0 auto;
position: relative;
}
.slides * {
-moz-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; }
.nav-dots {
width: 100%;
bottom: 9px;
height: 11px;
display: block;
position: absolute;
text-align: center;
}
.nav-dots .nav-dot {
top: -5px;
width: 11px;
height: 11px;
margin: 0 4px;
position: relative;
border-radius: 100%;
display: inline-block;
background-color: rgba(0, 0, 0, 0.6);
}
.nav-dots .nav-dot:hover {
cursor: pointer;
background-color: rgba(0, 0, 0, 0.8);
}
input#img-1:checked ~ .nav-dots label#img-dot-1,
input#img-2:checked ~ .nav-dots label#img-dot-2,
input#img-3:checked ~ .nav-dots label#img-dot-3,
input#img-4:checked ~ .nav-dots label#img-dot-4,
input#img-5:checked ~ .nav-dots label#img-dot-5,
input#img-6:checked ~ .nav-dots label#img-dot-6 {
background: rgba(0, 0, 0, 0.8);
}<html><head>
<meta charset="UTF-8">
<title>Simple css slider</title>
</head>
<body>
<ul class="slides">
<input name="radio-btn" id="img-1" checked="" type="radio">
<li class="slide-container">
<div class="slide">
<img src="http://farm9.staticflickr.com/8072/8346734966_f9cd7d0941_z.jpg">
</div>
<div class="nav">
<label for="img-6" class="prev">‹</label>
<label for="img-2" class="next">›</label>
</div>
</li>
<input name="radio-btn" id="img-2" type="radio">
<li class="slide-container">
<div class="slide">
<img src="http://farm9.staticflickr.com/8504/8365873811_d32571df3d_z.jpg">
</div>
<div class="nav">
<label for="img-1" class="prev">‹</label>
<label for="img-3" class="next">›</label>
</div>
</li>
<input name="radio-btn" id="img-3" type="radio">
<li class="slide-container">
<div class="slide">
<img src="http://farm9.staticflickr.com/8068/8250438572_d1a5917072_z.jpg">
</div>
<div class="nav">
<label for="img-2" class="prev">‹</label>
<label for="img-4" class="next">›</label>
</div>
</li>
<input name="radio-btn" id="img-4" type="radio">
<li class="slide-container">
<div class="slide">
<img src="http://farm9.staticflickr.com/8061/8237246833_54d8fa37f0_z.jpg">
</div>
<div class="nav">
<label for="img-3" class="prev">‹</label>
<label for="img-5" class="next">›</label>
</div>
</li>
<input name="radio-btn" id="img-5" type="radio">
<li class="slide-container">
<div class="slide">
<img src="http://farm9.staticflickr.com/8055/8098750623_66292a35c0_z.jpg">
</div>
<div class="nav">
<label for="img-4" class="prev">‹</label>
<label for="img-6" class="next">›</label>
</div>
</li>
<input name="radio-btn" id="img-6" type="radio">
<li class="slide-container">
<div class="slide">
<img src="http://farm9.staticflickr.com/8195/8098750703_797e102da2_z.jpg">
</div>
<div class="nav">
<label for="img-5" class="prev">‹</label>
<label for="img-1" class="next">›</label>
</div>
</li>
<li class="nav-dots">
<label for="img-1" class="nav-dot" id="img-dot-1"></label>
<label for="img-2" class="nav-dot" id="img-dot-2"></label>
<label for="img-3" class="nav-dot" id="img-dot-3"></label>
<label for="img-4" class="nav-dot" id="img-dot-4"></label>
<label for="img-5" class="nav-dot" id="img-dot-5"></label>
<label for="img-6" class="nav-dot" id="img-dot-6"></label>
</li>
</ul>
</body></html>