堆栈内存溢出
  繁体   English   中英

HTML / CSS照片库不显示图片

[英]HTML/CSS Photo Gallery not displaying pictures

 原文  2015-08-05 16:26:11  5   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