图像滑块将不起作用

Question

我试图为我的学校项目使用图像滑块。它的工作原理完全当我测试它在另一个.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

小提琴链接：http://jsfiddle.net/nmtx8roc/

Answer 1

你可以做，在简单的CSS

>不需任何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; 
 

 
\t 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 { 
 
\t width: 100%; 
 
\t bottom: 9px; 
 
\t height: 11px; 
 
\t display: block; 
 
\t position: absolute; 
 
\t text-align: center; 
 
} 
 

 
.nav-dots .nav-dot { 
 
\t top: -5px; 
 
\t width: 11px; 
 
\t height: 11px; 
 
\t margin: 0 4px; 
 
\t position: relative; 
 
\t border-radius: 100%; 
 
\t display: inline-block; 
 
\t background-color: rgba(0, 0, 0, 0.6); 
 
} 
 

 
.nav-dots .nav-dot:hover { 
 
\t cursor: pointer; 
 
\t 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 { 
 
\t 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"> 
 
\t \t <div class="slide"> 
 
\t \t \t <img src="http://farm9.staticflickr.com/8072/8346734966_f9cd7d0941_z.jpg"> 
 
     </div> 
 
\t \t <div class="nav"> 
 
\t \t \t <label for="img-6" class="prev">‹</label> 
 
\t \t \t <label for="img-2" class="next">›</label> 
 
\t \t </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> 
 
\t \t <div class="nav"> 
 
\t \t \t <label for="img-1" class="prev">‹</label> 
 
\t \t \t <label for="img-3" class="next">›</label> 
 
\t \t </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> 
 
\t \t <div class="nav"> 
 
\t \t \t <label for="img-2" class="prev">‹</label> 
 
\t \t \t <label for="img-4" class="next">›</label> 
 
\t \t </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> 
 
\t \t <div class="nav"> 
 
\t \t \t <label for="img-3" class="prev">‹</label> 
 
\t \t \t <label for="img-5" class="next">›</label> 
 
\t \t </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> 
 
\t \t <div class="nav"> 
 
\t \t \t <label for="img-4" class="prev">‹</label> 
 
\t \t \t <label for="img-6" class="next">›</label> 
 
\t \t </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> 
 
\t \t <div class="nav"> 
 
\t \t \t <label for="img-5" class="prev">‹</label> 
 
\t \t \t <label for="img-1" class="next">›</label> 
 
\t \t </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>