CSS3滑块，最后一张图片没有显示

【问题标题】：CSS3 slider, last image not showing upCSS3滑块，最后一张图片没有显示
【发布时间】：2014-10-27 09:15:45
【问题描述】：

我正在使用图像滑块，一切正常，除非我编辑代码以显示额外的图像（图像 id 6）。所有动画都有效，我可以导航到第 6 张幻灯片，但图像是黑色的。当我检查元素时，它显示图像路径是正确的。

我还在一个带有图像占位符的小提琴中添加了代码，第 6 张幻灯片也显示了一个黑框。

知道我做错了什么吗？我认为这是 CSS 中的东西，但我找不到它是什么。

小提琴：http://jsfiddle.net/98LLpmc3/1/

我的css代码：

@font-face {
    font-family: 'WebSymbolsRegular';
    src: url('http://html5css3demos.bplaced.net/css3-slider-v3/websymbols-regular-webfont.eot');
    src: url('http://html5css3demos.bplaced.net/css3-slider-v3/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'), url('http://html5css3demos.bplaced.net/css3-slider-v3/websymbols-regular-webfont.woff') format('woff'), url('http://html5css3demos.bplaced.net/css3-slider-v3/websymbols-regular-webfont.ttf') format('truetype'), url('http://html5css3demos.bplaced.net/css3-slider-v3/websymbols-regular-webfont#WebSymbolsRegular') format('svg');
}

@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,700);

* {
    margin: 0;
    padding: 0;
}

body {
    padding: 1px;
}

h1 { color: white }

#slideshow-wrap {
    display: block;
    height: 400px;
    min-width: 260px;
    max-width: 988px;
    margin: auto;
    /* border: 12px rgba(255,255,240,1) solid; */
    -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,.8);
    -moz-box-shadow: 0px 0px 5px rgba(0,0,0,.8);
    box-shadow: 0px 0px 5px rgba(0,0,0,.8);
    margin-top: 20px;
    position: relative;
    margin-bottom: 20px;
}

#slideshow-inner {
    width: 100%;
    height: 100%;
    background-color: rgb(0,0,0);
    overflow: hidden;
    position: relative;
}

#slideshow-inner>ul {
    list-style: none;
    height: 100%;
    width: 500%;
    overflow: hidden;
    position: relative;
    left: 0px;
    -webkit-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
    transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
}

#slideshow-inner>ul>li {
    width: 20%;
    height: 400px;
    float: left;
    position: relative;
}

#slideshow-inner>ul>li>img {
    margin: auto;
    height: 100%;
}

#slideshow-wrap input[type=radio] {
    position: absolute;
    left: 50%;
    bottom: 15px;
    z-index: 100;
    visibility: hidden;
}

#slideshow-wrap label:not(.arrows):not(.show-description-label) {
    position: absolute;
    left: 50%;
    bottom: -45px;
    z-index: 100;
    width: 12px;
    height: 12px;
    background-color: rgba(200,200,200,1);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    cursor: pointer;
    -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,.8);
    -moz-box-shadow: 0px 0px 3px rgba(0,0,0,.8);
    box-shadow: 0px 0px 3px rgba(0,0,0,.8);
    -webkit-transition: background-color .2s;
    -moz-transition: background-color .2s;
    -o-transition: background-color .2s;
    transition: background-color .2s;
}

#slideshow-wrap label:not(.arrows):active { bottom: -46px }

#slideshow-wrap input[type=radio]#button-1:checked~label[for=button-1] { background-color: rgba(100,100,100,1) }

#slideshow-wrap input[type=radio]#button-2:checked~label[for=button-2] { background-color: rgba(100,100,100,1) }

#slideshow-wrap input[type=radio]#button-3:checked~label[for=button-3] { background-color: rgba(100,100,100,1) }

#slideshow-wrap input[type=radio]#button-4:checked~label[for=button-4] { background-color: rgba(100,100,100,1) }

#slideshow-wrap input[type=radio]#button-5:checked~label[for=button-5] { background-color: rgba(100,100,100,1) }

#slideshow-wrap input[type=radio]#button-6:checked~label[for=button-6] { background-color: rgba(100,100,100,1) }

#slideshow-wrap label[for=button-1] { margin-left: -36px }

#slideshow-wrap label[for=button-2] { margin-left: -18px }

#slideshow-wrap label[for=button-4] { margin-left: 18px }

#slideshow-wrap label[for=button-5] { margin-left: 36px }

#slideshow-wrap label[for=button-6] { margin-left: 54px }

#slideshow-wrap input[type=radio]#button-1:checked~#slideshow-inner>ul { left: 0 }

#slideshow-wrap input[type=radio]#button-2:checked~#slideshow-inner>ul { left: -100% }

#slideshow-wrap input[type=radio]#button-3:checked~#slideshow-inner>ul { left: -200% }

#slideshow-wrap input[type=radio]#button-4:checked~#slideshow-inner>ul { left: -300% }

#slideshow-wrap input[type=radio]#button-5:checked~#slideshow-inner>ul { left: -400% }

#slideshow-wrap input[type=radio]#button-6:checked~#slideshow-inner>ul { left: -500% }

label.arrows {
    font-family: 'WebSymbolsRegular';
    font-size: 25px;
    color: rgb(255,255,240);
    position: absolute;
    top: 50%;
    margin-top: -25px;
    display: none;
    opacity: 0.7;
    cursor: pointer;
    z-index: 1000;
    background-color: transparent;
    -webkit-transition: opacity .2s;
    -moz-transition: opacity .2s;
    -o-transition: opacity .2s;
    transition: opacity .2s;
    text-shadow: 0px 0px 3px rgba(0,0,0,.8);
}

label.arrows:hover { opacity: 1 }

label.arrows:active { margin-top: -23px }

input[type=radio]#button-1:checked~.arrows#arrow-2, input[type=radio]#button-2:checked~.arrows#arrow-3, input[type=radio]#button-3:checked~.arrows#arrow-4, input[type=radio]#button-4:checked~.arrows#arrow-5,
input[type=radio]#button-5:checked~.arrows#arrow-6 {
    right: -55px;
    display: block;
}

input[type=radio]#button-2:checked~.arrows#arrow-1, input[type=radio]#button-3:checked~.arrows#arrow-2, input[type=radio]#button-4:checked~.arrows#arrow-3, input[type=radio]#button-5:checked~.arrows#arrow-4,
input[type=radio]#button-6:checked~.arrows#arrow-5 {
    left: -55px;
    display: block;
    -webkit-transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1);
}

input[type=radio]#button-2:checked~.arrows#arrow-1 { left: -19px }

input[type=radio]#button-3:checked~.arrows#arrow-2 { left: -37px }

input[type=radio]#button-4:checked~.arrows#arrow-3 { left: -73px }

input[type=radio]#button-5:checked~.arrows#arrow-4 { left: -145px }

input[type=radio]#button-6:checked~.arrows#arrow-5 { left: -289px }


.description {
    position: absolute;
    top: 0;
    left: 0;
    width: 260px;
    font-family: 'Yanone Kaffeesatz';
    z-index: 1000;
}

.description input { visibility: hidden }

.description label {
    font-family: 'WebSymbolsRegular';
    background-color: rgba(255,255,240,1);
    position: relative;
    left: -17px;
    top: 00px;
    width: 40px;
    height: 27px;
    display: inline-block;
    text-align: center;
    padding-top: 7px;
    border-bottom-right-radius: 15px;
    cursor: pointer;
    opacity: 0;
    -webkit-transition: opacity .2s;
    -moz-transition: opacity .2s;
    -o-transition: opacity .2s;
    transition: opacity .2s;
    z-index: 5;
    color: rgb(20,20,20);
}

#slideshow-inner>ul>li:hover .description label { opacity: 1 }

.description input[type=checkbox]:checked~label { opacity: 1 }

.description .description-text {
    background-color: rgba(255,255,230,.5);
    padding-left: 45px;
    padding-top: 25px;
    padding-right: 15px;
    padding-bottom: 15px;
    position: relative;
    top: -35px;
    z-index: 4;
    opacity: 0;
    -webkit-transition: opacity .2s;
    -moz-transition: opacity .2s;
    -o-transition: opacity .2s;
    transition: opacity .2s;
    color: rgb(20,20,20);
}

.description input[type=checkbox]:checked~.description-text { opacity: 1 }

我的 HTML：

<div id="slideshow-wrap">
        <input type="radio" id="button-1" name="controls" checked="checked"/>
        <label for="button-1"></label>
        <input type="radio" id="button-2" name="controls"/>
        <label for="button-2"></label>
        <input type="radio" id="button-3" name="controls"/>
        <label for="button-3"></label>
        <input type="radio" id="button-4" name="controls"/>
        <label for="button-4"></label>
        <input type="radio" id="button-5" name="controls"/>
        <label for="button-5"></label>
        <input type="radio" id="button-6" name="controls"/>
        <label for="button-6"></label>
        <label for="button-1" class="arrows" id="arrow-1">></label>
        <label for="button-2" class="arrows" id="arrow-2">></label>
        <label for="button-3" class="arrows" id="arrow-3">></label>
        <label for="button-4" class="arrows" id="arrow-4">></label>
        <label for="button-5" class="arrows" id="arrow-5">></label>
        <label for="button-6" class="arrows" id="arrow-6">></label>
        <div id="slideshow-inner">
            <ul>
                <li id="slide1">
                    <img src="images/slides/img1a.jpg" />
                    <div class="description">
                        <input type="checkbox" id="show-description-1"/>
                        <label for="show-description-1" class="show-description-label">I</label>
                        <div class="description-text">
                            <h2>Flower power</h2>
                            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</p>
                        </div>
                    </div>
                </li>
                <li id="slide2">
                    <img src="images/slides/img2a.jpg" />
                    <div class="description">
                        <input type="checkbox" id="show-description-2"/>
                        <label for="show-description-2" class="show-description-label">I</label>
                        <div class="description-text">
                            <h2>Golden sunset</h2>
                            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</p>
                        </div>
                    </div>
                </li>
                <li id="slide3">
                    <img src="images/slides/img3a.jpg" />
                    <div class="description">
                        <input type="checkbox" id="show-description-3"/>
                        <label for="show-description-3" class="show-description-label">I</label>
                        <div class="description-text">
                            <h2>Flower power again</h2>
                            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</p>
                        </div>
                    </div>
                </li>
                <li id="slide4">
                    <img src="images/slides/img4a.jpg" />
                    <div class="description">
                        <input type="checkbox" id="show-description-4"/>
                        <label for="show-description-4" class="show-description-label">I</label>
                        <div class="description-text">
                            <h2>Stormy coast</h2>
                            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</p>
                        </div>
                    </div>
                </li>
                <li id="slide5">
                    <img src="images/slides/img5a.jpg" />
                    <div class="description">
                        <input type="checkbox" id="show-description-5"/>
                        <label for="show-description-5" class="show-description-label">I</label>
                        <div class="description-text">
                            <h2>Splash!</h2>
                            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</p>
                        </div>
                    </div>
                </li>
                <li id="slide6">
                    <img src="images/slides/img6a.jpg" />
                    <div class="description">
                        <input type="checkbox" id="show-description-6"/>
                        <label for="show-description-6" class="show-description-label">I</label>
                        <div class="description-text">
                            <h2>Splash!</h2>
                            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</p>
                        </div>
                    </div>
                </li>
                 <li id="slide7">
                    <img src="images/slides/img7a.jpg" />
                    <div class="description">
                        <input type="checkbox" id="show-description-5"/>
                        <label for="show-description-5" class="show-description-label">I</label>
                        <div class="description-text">
                            <h2>Splash!</h2>
                            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</p>
                        </div>
                    </div>
                </li>
                 <li id="slide8">
                    <img src="images/slides/img8a.jpg" />
                    <div class="description">
                        <input type="checkbox" id="show-description-5"/>
                        <label for="show-description-5" class="show-description-label">I</label>
                        <div class="description-text">
                            <h2>Splash!</h2>
                            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</p>
                        </div>
                    </div>
                </li>
                 <li id="slide9">
                    <img src="images/slides/img9a.jpg" />
                    <div class="description">
                        <input type="checkbox" id="show-description-5"/>
                        <label for="show-description-5" class="show-description-label">I</label>
                        <div class="description-text">
                            <h2>Splash!</h2>
                            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</p>
                        </div>
                    </div>
                </li>
                 <li id="slide10">
                    <img src="images/slides/img10a.jpg" />
                    <div class="description">
                        <input type="checkbox" id="show-description-5"/>
                        <label for="show-description-5" class="show-description-label">I</label>
                        <div class="description-text">
                            <h2>Splash!</h2>
                            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</p>
                        </div>
                    </div>
                </li>
                 <li id="slide11">
                    <img src="images/slides/img11a.jpg" />
                    <div class="description">
                        <input type="checkbox" id="show-description-5"/>
                        <label for="show-description-5" class="show-description-label">I</label>
                        <div class="description-text">
                            <h2>Splash!</h2>
                            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</p>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>

【问题讨论】：

  • 如果您认为这是因为 css，请使用 jigsaw.w3.org/css-validator/validator 来验证 css。你会知道错误和警告。
  • 我只收到了一个与@import 相关的错误，但这与幻灯片本身无关，而是与字体有关。
  • 你确定图片路径吗？
  • 是的，当我将鼠标悬停在检查元素中的链接上时，它会显示图像。我在小提琴中使用了imageplaceholder链接，都是相同的链接，但第6张图片没有显示。
  • 从幻灯片 7 到 11，您的输入 ID 都是相同的。

标签： html css slider


【解决方案1】：

好的，问题在于 CSS 计算。我猜最初有 5 张幻灯片，基于此，您将 ul 宽度设置为 500%，li 宽度设置为 20%。但是由于现在您添加了另一个 li，因此 li 的整体宽度和单个宽度必须更改，即 100/6 。同样，您应该修改 margin-left 属性。

我希望你已经得到了答案。

这里是演示：http://jsfiddle.net/lotusgodkk/98LLpmc3/11/

HTML：

<div id="slideshow-wrap">
    <input type="radio" id="button-1" name="controls" checked="checked" />
    <label for="button-1"></label>
    <input type="radio" id="button-2" name="controls" />
    <label for="button-2"></label>
    <input type="radio" id="button-3" name="controls" />
    <label for="button-3"></label>
    <input type="radio" id="button-4" name="controls" />
    <label for="button-4"></label>
    <input type="radio" id="button-5" name="controls" />
    <label for="button-5"></label>
    <input type="radio" id="button-6" name="controls" />
    <label for="button-6"></label>
    <label for="button-1" class="arrows" id="arrow-1">></label>
    <label for="button-2" class="arrows" id="arrow-2">></label>
    <label for="button-3" class="arrows" id="arrow-3">></label>
    <label for="button-4" class="arrows" id="arrow-4">></label>
    <label for="button-5" class="arrows" id="arrow-5">></label>
    <label for="button-6" class="arrows" id="arrow-6">></label>
    <div id="slideshow-inner">
        <ul>
            <li id="slide1">
                <img src="http://www.lorempixel.com/988/400/sports/1/" />
                <div class="description">
                    <input type="checkbox" id="show-description-1" />
                    <label for="show-description-1" class="show-description-label">I</label>
                    <div class="description-text">
                         <h2>Flower power</h2>

                        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</p>
                    </div>
                </div>
            </li>
            <li id="slide2">
                <img src="http://www.lorempixel.com/988/400/sports/2/" />
                <div class="description">
                    <input type="checkbox" id="show-description-2" />
                    <label for="show-description-2" class="show-description-label">I</label>
                    <div class="description-text">
                         <h2>Golden sunset</h2>

                        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</p>
                    </div>
                </div>
            </li>
            <li id="slide3">
                <img src="http://www.lorempixel.com/988/400/sports/3/" />
                <div class="description">
                    <input type="checkbox" id="show-description-3" />
                    <label for="show-description-3" class="show-description-label">I</label>
                    <div class="description-text">
                         <h2>Flower power again</h2>

                        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</p>
                    </div>
                </div>
            </li>
            <li id="slide4">
                <img src="http://www.lorempixel.com/988/400/sports/4/" />
                <div class="description">
                    <input type="checkbox" id="show-description-4" />
                    <label for="show-description-4" class="show-description-label">I</label>
                    <div class="description-text">
                         <h2>Stormy coast</h2>

                        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</p>
                    </div>
                </div>
            </li>
            <li id="slide5">
                <img src="http://www.lorempixel.com/988/400/sports/5/" />
                <div class="description">
                    <input type="checkbox" id="show-description-5" />
                    <label for="show-description-5" class="show-description-label">I</label>
                    <div class="description-text">
                         <h2>Splash!</h2>

                        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</p>
                    </div>
                </div>
            </li>
            <li id="slide6">
                <img src="http://www.lorempixel.com/988/400/sports/6/" />
                <div class="description">
                    <input type="checkbox" id="show-description-6" />
                    <label for="show-description-6" class="show-description-label">I</label>
                    <div class="description-text">
                         <h2>Splash!</h2>

                        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</p>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>

更新的 CSS：

@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400, 700);
 @font-face {
    font-family:'WebSymbolsRegular';
    src: url('http://html5css3demos.bplaced.net/css3-slider-v3/websymbols-regular-webfont.eot');
    src: url('http://html5css3demos.bplaced.net/css3-slider-v3/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'), url('http://html5css3demos.bplaced.net/css3-slider-v3/websymbols-regular-webfont.woff') format('woff'), url('http://html5css3demos.bplaced.net/css3-slider-v3/websymbols-regular-webfont.ttf') format('truetype'), url('http://html5css3demos.bplaced.net/css3-slider-v3/websymbols-regular-webfont#WebSymbolsRegular') format('svg');
}
* {
    margin: 0;
    padding: 0;
}
body {
    padding: 1px;
}
h1 {
    color: white
}
#slideshow-wrap {
    display: block;
    height: 400px;
    min-width: 260px;
    max-width: 988px;
    margin: auto;
    /* border: 12px rgba(255,255,240,1) solid; */
    -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, .8);
    -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, .8);
    box-shadow: 0px 0px 5px rgba(0, 0, 0, .8);
    margin-top: 20px;
    position: relative;
    margin-bottom: 20px;
}
#slideshow-inner {
    width: 100%;
    height: 100%;
    background-color: rgb(0, 0, 0);
    overflow: hidden;
    position: relative;
}
#slideshow-inner>ul {
    list-style: none;
    height: 100%;
    width: 600%;
    overflow: hidden;
    position: relative;
    left: 0px;
    -webkit-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
    transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
}
#slideshow-inner>ul>li {
    width: 16.66%;
    height: 400px;
    float: left;
    position: relative;
}
#slideshow-inner>ul>li>img {
    margin: auto;
    height: 100%;
}
#slideshow-wrap input[type=radio] {
    position: absolute;
    left: 50%;
    bottom: 15px;
    z-index: 100;
    visibility: hidden;
}
#slideshow-wrap label:not(.arrows):not(.show-description-label) {
    position: absolute;
    left: 50%;
    bottom: -45px;
    z-index: 100;
    width: 12px;
    height: 12px;
    background-color: rgba(200, 200, 200, 1);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    cursor: pointer;
    -webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, .8);
    -moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, .8);
    box-shadow: 0px 0px 3px rgba(0, 0, 0, .8);
    -webkit-transition: background-color .2s;
    -moz-transition: background-color .2s;
    -o-transition: background-color .2s;
    transition: background-color .2s;
}
#slideshow-wrap label:not(.arrows):active {
    bottom: -46px
}
#slideshow-wrap input[type=radio]#button-1:checked~label[for=button-1] {
    background-color: rgba(100, 100, 100, 1)
}
#slideshow-wrap input[type=radio]#button-2:checked~label[for=button-2] {
    background-color: rgba(100, 100, 100, 1)
}
#slideshow-wrap input[type=radio]#button-3:checked~label[for=button-3] {
    background-color: rgba(100, 100, 100, 1)
}
#slideshow-wrap input[type=radio]#button-4:checked~label[for=button-4] {
    background-color: rgba(100, 100, 100, 1)
}
#slideshow-wrap input[type=radio]#button-5:checked~label[for=button-5] {
    background-color: rgba(100, 100, 100, 1)
}
#slideshow-wrap input[type=radio]#button-6:checked~label[for=button-6] {
    background-color: rgba(100, 100, 100, 1)
}
#slideshow-wrap label[for=button-1] {
    margin-left: -36px
}
#slideshow-wrap label[for=button-2] {
    margin-left: -18px
}
#slideshow-wrap label[for=button-4] {
    margin-left: 18px
}
#slideshow-wrap label[for=button-5] {
    margin-left: 36px
}
#slideshow-wrap label[for=button-6] {
    margin-left: 54px
}
#slideshow-wrap input[type=radio]#button-1:checked~#slideshow-inner>ul {
    left: 0
}
#slideshow-wrap input[type=radio]#button-2:checked~#slideshow-inner>ul {
    left: -100%
}
#slideshow-wrap input[type=radio]#button-3:checked~#slideshow-inner>ul {
    left: -200%
}
#slideshow-wrap input[type=radio]#button-4:checked~#slideshow-inner>ul {
    left: -300%
}
#slideshow-wrap input[type=radio]#button-5:checked~#slideshow-inner>ul {
    left: -400%
}
#slideshow-wrap input[type=radio]#button-6:checked~#slideshow-inner>ul {
    left: -500%
}
label.arrows {
    font-family:'WebSymbolsRegular';
    font-size: 25px;
    color: rgb(255, 255, 240);
    position: absolute;
    top: 50%;
    margin-top: -25px;
    display: none;
    opacity: 0.7;
    cursor: pointer;
    z-index: 1000;
    background-color: transparent;
    -webkit-transition: opacity .2s;
    -moz-transition: opacity .2s;
    -o-transition: opacity .2s;
    transition: opacity .2s;
    text-shadow: 0px 0px 3px rgba(0, 0, 0, .8);
}
label.arrows:hover {
    opacity: 1
}
label.arrows:active {
    margin-top: -23px
}
input[type=radio]#button-1:checked~.arrows#arrow-2, input[type=radio]#button-2:checked~.arrows#arrow-3, input[type=radio]#button-3:checked~.arrows#arrow-4, input[type=radio]#button-4:checked~.arrows#arrow-5, input[type=radio]#button-5:checked~.arrows#arrow-6 {
    right: -55px;
    display: block;
}
input[type=radio]#button-2:checked~.arrows#arrow-1, input[type=radio]#button-3:checked~.arrows#arrow-2, input[type=radio]#button-4:checked~.arrows#arrow-3, input[type=radio]#button-5:checked~.arrows#arrow-4, input[type=radio]#button-6:checked~.arrows#arrow-5 {
    left: -55px;
    display: block;
    -webkit-transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1);
}
input[type=radio]#button-2:checked~.arrows#arrow-1 {
    left: -19px
}
input[type=radio]#button-3:checked~.arrows#arrow-2 {
    left: -37px
}
input[type=radio]#button-4:checked~.arrows#arrow-3 {
    left: -55px
}
input[type=radio]#button-5:checked~.arrows#arrow-4 {
    left: -73px
}
input[type=radio]#button-6:checked~.arrows#arrow-5 {
    left: -91px
}
.description {
    position: absolute;
    top: 0;
    left: 0;
    width: 260px;
    font-family:'Yanone Kaffeesatz';
    z-index: 1000;
}
.description input {
    visibility: hidden
}
.description label {
    font-family:'WebSymbolsRegular';
    background-color: rgba(255, 255, 240, 1);
    position: relative;
    left: -17px;
    top: 00px;
    width: 40px;
    height: 27px;
    display: inline-block;
    text-align: center;
    padding-top: 7px;
    border-bottom-right-radius: 15px;
    cursor: pointer;
    opacity: 0;
    -webkit-transition: opacity .2s;
    -moz-transition: opacity .2s;
    -o-transition: opacity .2s;
    transition: opacity .2s;
    z-index: 5;
    color: rgb(20, 20, 20);
}
#slideshow-inner>ul>li:hover .description label {
    opacity: 1
}
.description input[type=checkbox]:checked~label {
    opacity: 1
}
.description .description-text {
    background-color: rgba(255, 255, 230, .5);
    padding-left: 45px;
    padding-top: 25px;
    padding-right: 15px;
    padding-bottom: 15px;
    position: relative;
    top: -35px;
    z-index: 4;
    opacity: 0;
    -webkit-transition: opacity .2s;
    -moz-transition: opacity .2s;
    -o-transition: opacity .2s;
    transition: opacity .2s;
    color: rgb(20, 20, 20);
}
.description input[type=checkbox]:checked~.description-text {
    opacity: 1
}

【讨论】：

  • 我认为你在正确的轨道上，我在 CSS 计算方面不是那么好，你知道我需要编辑 500% 以显示第 6 张幻灯片吗？我尝试了 600%，但这有点破坏了滑块，并显示了一半的幻灯片。
  • 我更新了代码，但它仍然在 slide6 上给了我一个黑框。除了这两个 CSS 属性之外，您是否更改了其他任何内容？
  • 查看演示。我通过替换初始图像添加了示例图像。我也将@import 移到了顶部。让我分享完整的代码。
  • 非常感谢！我复制了代码，现在它可以工作了，只有左箭头一直向左移动，直到它离开屏幕，知道是什么原因造成的吗？感谢您花时间回答。
  • 嗯，我敢肯定这一定是由于计算。由于 css 包含许多硬编码值。让我检查一下。
【解决方案2】：

您好，您在添加第六个滑块时错过了更新以下 CSS。

#slideshow-inner>ul {
list-style: none;
height: 100%;
**width: 600%;**

你可以参考这个...http://jsfiddle.net/DDSridhar/bsvac0f1/2/ 因此，在添加每张新幻灯片时，您也需要更新它......

【讨论】：

    猜你喜欢
    • 2018-09-23
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode