问题
Again, first website, and first time using the "section" tags so I'm still getting familiar with them.
I copied the code for a photo gallery banner from http://www.johnnycupcakes.com. I inspected the elements and copied the HTML & CSS code and placed them in my, except changed the pictures because I like the layout. However, the pictures I chose (which are saved locally) will not show up. I have pictures elsewhere on my page that are called in the same exact format and they show up fine.
Here is the HTML:
<section id="content" class="clearfix">
<div class="full-wrap">
<div class="contain contain-slides">
<div class="swiper-container">
<div class="swiper-wrapper" style="width: 11056px; height: 820px; transition: 0s; -webkit-transition: 0s; transform: translate3d(-6910px, 0px, 0px); -webkit-transform: translate3d(-6910px, 0px, 0px);">
<a class="swiper-slide" style="width: 10382px; height: 820px;" href="/services.html">
<img src="/Images/iPhone_5C_fix.jpg"/>
</a>
<a class="swiper-slide" style="width: 1382px; height: 820px;" href="/services.html">
<img src="/Images/iPad repair.jpg"/>
</a>
<a class="swiper-slide" style="width: 1382px; height: 820px;" href="/services.html">
<img src="/Images/MacBook Repair.jpg"/>
</a>
</div>
<div class="pagination">
<span class="swiper-pagination-switch swiper-visible-switch swiper-active-switch"></span>
<span class="swiper-pagination-switch"></span>
<span class="swiper-pagination-switch"></span>
</div>
</div>
</div>
</div>
</section>
CSS:
.content {
float: left;
width: 100%
}
.full-wrap {
width: 100%;
float: left;
position: relative
}
.full-wrap.title {
margin: 10px 0px
}
.events .full-wrap.title {
margin-top: 70px
}
.contain {
max-width: 1240px;
margin: 0 auto;
padding: 0px 20px;
position: relative
}
.contain-slides {
margin-top: 50px
}
.swiper-container {
margin: 0 auto;
position: relative;
overflow: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 1;
cursor: pointer !important
}
.swiper-container {
width: 100%;
height: 100%;
color: #fff;
text-align: center
}
.swiper-container[style] {
height: auto !important
}
.swiper-container.product-page {
width: 90%;
float: left;
margin: 0;
color: #fff;
border: 1px solid #ccc;
border-bottom: 1px solid #ccc;
overflow: hidden
}
.swiper-wrapper {
position: relative;
width: 9999999px;
overflow: hidden;
-webkit-transition-property: -webkit-transform, left, top;
-webkit-transition-duration: 0s;
-webkit-transform: translate3d(0px, 0, 0);
-webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
-moz-transition-property: -moz-transform, left, top;
-moz-transition-duration: 0s;
-moz-transform: translate3d(0px, 0, 0);
-moz-transition-timing-function: ease;
-o-transition-property: -o-transform, left, top;
-o-transition-duration: 0s;
-o-transform: translate3d(0px, 0, 0);
-o-transition-timing-function: ease;
-o-transform: translate(0px, 0px);
-ms-transition-property: -ms-transform, left, top;
-ms-transition-duration: 0s;
-ms-transform: translate3d(0px, 0, 0);
-ms-transition-timing-function: ease;
transition-property: transform, left, top;
transition-duration: 0s;
transform: translate3d(0px, 0, 0);
transition-timing-function: ease;
-webkit-transition: all 500ms cubic-bezier(0.86, 0, 0.07, 1);
-moz-transition: all 500ms cubic-bezier(0.86, 0, 0.07, 1);
-o-transition: all 500ms cubic-bezier(0.86, 0, 0.07, 1);
transition: all 500ms cubic-bezier(0.86, 0, 0.07, 1)
}
.swiper-free-mode>.swiper-wrapper {
-webkit-transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
-ms-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
transition-timing-function: ease-out;
-webkit-transition: all 500ms cubic-bezier(0.86, 0, 0.07, 1);
-moz-transition: all 500ms cubic-bezier(0.86, 0, 0.07, 1);
-o-transition: all 500ms cubic-bezier(0.86, 0, 0.07, 1);
transition: all 500ms cubic-bezier(0.86, 0, 0.07, 1);
margin: 0 auto
}
.swiper-wrapper[style] {
height: 500px !important
}
.swiper-slide {
float: left
}
.swiper-slide .title {
font-style: italic;
font-size: 42px;
margin-top: 80px;
margin-bottom: 0;
line-height: 45px
}
.swiper-slide[style] {
height: auto !important
}
.swiper-slide img {
width: 100%;
height: auto
}
.swiper-slide.product-page {
background: none;
overflow: hidden;
color: #fff
}
.pagination {
margin: 0 auto
}
.swiper-pagination-switch {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 10px;
background: #000;
margin: 4px;
border: 2px solid #fff;
cursor: pointer;
-webkit-transition: all 500ms cubic-bezier(0.86, 0, 0.07, 1);
-moz-transition: all 500ms cubic-bezier(0.86, 0, 0.07, 1);
-o-transition: all 500ms cubic-bezier(0.86, 0, 0.07, 1);
transition: all 500ms cubic-bezier(0.86, 0, 0.07, 1)
}
.swiper-pagination-switch:hover {
-moz-transform: scale(1.4);
-webkit-transform: scale(1.4);
-o-transform: scale(1.4);
-ms-transform: scale(1.4);
transform: scale(1.4)
}
.swiper-visible-switch {
background: #aaa
}
.swiper-active-switch {
background: #fff;
border: 2px solid #000;
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2)
}
The only thing I removed were 5 lines of which the original code had 8, but I only need to display 5 pictures right now.
Any help on why my pictures aren't displaying?
回答1:
this should do the trick... let me know
Here is the JSFiddle Demo
Screenshot:
//HTML
<!DOCTYPE html>
<html>
<head>
<link href="index.css" rel="stylesheet">
<script>
document.onreadystatechange = function(){
if(document.readyState == "interactive"){
slider();
}
}
function slider(){
var slider = document.querySelector("figure");
var slides = slider.children;
setInterval(function(){
slider.appendChild(slides[0]);
}, 5000)
}
</script>
</head>
<body>
<nav>
<div>
<div id="logo">LOGO</div>
</div>
<div>
<a href='http://www.se7enservice.com/' class="here">Home</a>
<a href="/about.html" >About</a>
<a href="/services.html" >Services</a>
<a href="/pricing.html" >Pricing</a>
<a href="/contact_us.html" >Contact Us</a>
</div>
<div>
</div>
</nav>
<section id="slider">
<figure>
<img src="https://myreco.me/images/news/55b089d22992f.jpg">
<img src="https://newevolutiondesigns.com/images/freebies/hd-wallpaper-6.jpg">
<img src="http://zhaba.ru/storage-10667/images-5354/5f87ae89312fe2ed1f845c2c2c468283_85354.jpg">
</figure>
</section>
<section id="content">
<header>
<h1>Header Section</h1>
<p>Lorem ipsum dolor sit amet, eos ea exerci ornatus detracto, eos ea equidem signiferumque. Et sea forensibus elaboraret, graeci platonem eos no, ut sit omittam senserit. Duis elitr omittantur mei id, ludus commune sapientem an mel. Sit ei dicunt electram scriptorem, pro ut iriure salutandi. Homero salutandi efficiantur ut vis.</p>
</header>
<section>
<h1>Section Section</h1>
<p>Lorem ipsum dolor sit amet, eos ea exerci ornatus detracto, eos ea equidem signiferumque. Et sea forensibus elaboraret, graeci platonem eos no, ut sit omittam senserit. Duis elitr omittantur mei id, ludus commune sapientem an mel. Sit ei dicunt electram scriptorem, pro ut iriure salutandi. Homero salutandi efficiantur ut vis.</p>
</section>
</section>
<footer></footer>
</body>
</html>
//CSS
body{
margin: 0 !important;
height: 100vh;
width: 100vw;
}
/* NAV */
nav{
display: -webkit-flex;
display: flex;
top: 0;
width: 100%;
min-height: 60px;
z-index: 999;
position: fixed;
background: #1E67CB;
box-shadow: 0 1px 5px rgba(0,0,0,.6);
-webkit-box-shadow: 0 1px 5px rgba(0,0,0,.6);
}
nav>div{
text-align: center;
-webkit-flex: 1;
flex: 1;
-webkit-align-self: center;
align-self: center;
}
#logo{
display: -webkit-flex;
display: flex;
cursor: default;
-webkit-align-self: center;
align-self: center;
margin-left: 1em;
color: #fff;
font-weight: bold;
font-size: 1.15em;
line-height: 1.43;
-webkit-font-smoothing: antialiased;
font-family: Circular,"Helvetica Neue",Helvetica,Arial,sans-serif;
}
nav>div{
width: 50vw;
display: -webkit-flex;
display: flex;
}
nav>div:nth-of-type(1){
-webkit-justify-content: flex-start;
justify-content: flex-start;
}
nav>div:nth-of-type(2){
-webkit-justify-content: center;
justify-content: center;
}
nav>div:nth-of-type(3){
-webkit-justify-content: flex-end;
justify-content: flex-end;
}
nav>div>a{
display: -webkit-flex;
display: flex;
-webkit-align-self: center;
align-self: center;
text-decoration: none;
cursor: pointer;
color: #fff;
font-size: 1em;
font-weight: 300;
-webkit-font-smoothing: antialiased;
font-family: HelveticaNeue-Light,"Helevetica Neue",Helvetica,Arial;
margin: 0 .5em;
padding: 0.6em 1.5em;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-transition: background-color 100ms;
-webkit-transition: background-color 100ms;
transition: background-color 100ms;
}
nav>div>a:hover{
background: rgba(255,255,255,0.15);
}
nav>div>a:active{
-webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}
nav>div:nth-of-type(3)>a:nth-of-type(2){
background: rgba(255, 255, 255, 0.15);
}
nav>div>a:nth-of-type(2):hover{
background: rgba(255, 255, 255, 0.37);
}
/* SLIDER */
#slider{
display: -webkit-flex;
display: flex;
overflow-x: hidden;
margin-top: 60px;
box-shadow: inset 0 1px 5px rgba(0,0,0,.6);
-webkit-box-shadow: inset 0 1px 5px rgba(0,0,0,.6);
}
figure{
display: -webkit-flex;
display: flex;
height: 40vh;
width: 100%;
max-height: 40vh;
transform: translateX(0);
margin: 0 !important;
animation: slider 5s ease infinite;
}
@keyframes slider {
0% { transform: translateX(0);}
20% { transform: translateX(0);}
50% { transform: translateX(0);}
90% { transform: translateX(-100%);}
100% { transform: translateX(-100%);}
}
figure>img{
min-width: 100vw;
}
/* CONTENT */
#content{
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
min-height: 200vh; /* DEVELOPMENT PURPOSES */
}
#content>header{
display: -webkit-flex;
display: flex;
margin-top: 30px;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-self: center;
align-self: center;
min-width: 1280px;
max-width: 1280px;
}
#content>section{
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-self: center;
align-self: center;
min-width: 1280px;
max-width: 1280px;
}
h1{
margin: 0;
font-size: 2em;
letter-spacing: -3px;
line-height: 1.1; cursor: default;
color: #333;
text-align: center;
font-family: "Avenir Next",Avenir,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
-webkit-font-smoothing: antialiased;
}
p{
text-align: center;
font-size: 1.5em;
line-height: 1.6em;
cursor: default;
color: #333;
text-align: center;
font-family: "Avenir Next",Avenir,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
-webkit-font-smoothing: antialiased;
}
/* FOOTER */
footer{
display: -webkit-flex;
display: flex;
/* position: absolute; */
width: 100%;
min-height: 100px;
bottom: 0;
background: #5c5c5c;
box-shadow: inset 0 1px 5px rgba(0,0,0,.6);
-webkit-box-shadow: inset 0 1px 5px rgba(0,0,0,.6);
}
回答2:
Ok here is a fiddle: https://jsfiddle.net/DIRTY_SMITH/hvsas2Lj/4/
As you can see there are images showing, I would start by adding the entire path to the image src example
<img src="http://lorempixel.com/400/200/">
This will do two things, either it will work or it wont.
If it works, your original path was wrong.
If it does not work,... Well lets just hope it works...
<a class="swiper-slide" style="width: 1382px; height: 820px;" href="/services.html">
<img src="http://lorempixel.com/400/200/"/>
</a>
P.S.: remove all the white spaces from the path (image name)
来源：https://stackoverflow.com/questions/31837995/html-css-photo-gallery-not-displaying-pictures