【发布时间】：2015-08-05 16:26:11
【问题描述】：
再次，第一个网站，第一次使用“部分”标签，所以我仍然熟悉它们。
我从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张图片。
任何关于为什么我的图片没有显示的帮助？
【问题讨论】：
-
强烈建议创建一些 JSFiddle/Plunker 寻求帮助。
-
所以
swiper-wrapper中的图片没有显示对吗？ -
@blackRob4953 这是一个非常糟糕的滑块...... HTML/CSS 有很多问题，我会为您制作一个并发布下面的示例。
标签： javascript jquery html css photo-gallery