堆棧內存溢出
  簡體   English   中英

HTML / CSS照片庫不顯示圖片

[英]HTML/CSS Photo Gallery not displaying pictures

 原文  2015-08-05 16:26:11  7   2    javascript/ jquery/ html/ css/ photo-gallery

問題描述

同樣，第一個網站，也是第一次使用“ section”標簽，因此我仍然很熟悉它們。

我從http://www.johnnycupcakes.com復制了照相館橫幅的代碼。 我檢查了元素，然后復制了HTML和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 個解決方案

解決方案1
 0  2015-08-05 16:36:31

好的，這里是一個小提琴： 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>

PS：刪除路徑中的所有空白（圖像名稱）

解決方案2
 0 已采納  2015-08-05 19:54:03

這應該可以解決問題...讓我知道

這是JSFiddle演示

屏幕截圖：

在此處輸入圖片說明

// 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); 
}

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 將Flash圖庫插入HTML CSS模板 HTML/CSS/JS 不顯示幻燈片圖片 在html中顯示圖片 html和css中的可點擊圖片 Cookie無法讀取照片庫CSS選擇狀態 CSS / HTML圖庫 帶有 HTML 和 CSS 的屏幕截圖庫？ HTML5 / JS畫布顯示圖片 帶有JS和CSS的HTML圖片庫 六邊形，在CSS HTML JavaScript中單擊更改圖片
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM