HTML / CSS照片库无法显示图片

时间：2015-08-05 16:26:12

标签： javascript jquery html css photo-gallery

再次，第一个网站，第一次使用“部分”标签，所以我仍然熟悉它们。

我从http://www.johnnycupcakes.com复制了照片库横幅的代码。我检查了元素并复制了HTML＆amp; CSS代码并将它们放在我的，除了改变了图片，因为我喜欢布局。但是，我选择的图片（在本地保存）将不会显示。我的页面上的其他地方的图片以相同的格式调用，它们显示正常。

这是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)
}

我唯一删除的是5行      原始代码有8个，但我现在只需要显示5张图片。

为什么我的照片没有显示有任何帮助？

2 个答案:

答案 0 :(得分：0)

好的，这是一个小提琴：https://jsfiddle.net/DIRTY_SMITH/hvsas2Lj/4/

如您所见，有图像显示，我首先将整个路径添加到图像src示例

<img src="http://lorempixel.com/400/200/">

这将做两件事，要么它会起作用，要么就行不通。

如果有效，原来的路径就错了。

如果它不起作用，......好吧，让我们希望它有效...... 

<a class="swiper-slide" style="width: 1382px; height: 820px;" href="/services.html">
     <img src="http://lorempixel.com/400/200/"/>
</a>

P.S。：从路径中删除所有空格（图片名称）

答案 1 :(得分：0)

这应该可以解决问题......让我知道

Here is the JSFiddle Demo

屏幕截图：

enter image description here

// 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); 
}
相关问题
最新问题