Question

在开始之前，我想感谢Keith Clark的视差代码。所以我试图用约50张照片创建一个视差网站，但每次添加超过六张图片时，图像都不会显示四张图片。我甚至试过把照片的在线链接，但它似乎仍然没有用，我尝试添加不同类型的照片，但它仍然无法正常工作。任何想法如何解决这个问题？

＆＃13;

<!DOCTYPE html>
<html>
<head>
<script src="myScript.js"></script>
    
    <title> Loose Fit </title>


    <style>
        @import url(http://www.1001fonts.com/code-predators-font.html);
        html {
            height: 100%;
            overflow: hidden;
        }

        .logo {
                background-image: url("https://s-media-cache-ak0.pinimg.com/736x/8e/d5/8d/8ed58d031c960b6fa4e14ae965d6aed0.jpg");
                position: absolute;
                top: 0;
                left: 0;
        }
        
        body { 
            margin:0;
            padding:0;
            perspective: 1px;
            -webkit-perspective: 1px;
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
            height: 100%;
            overflow-y: scroll;
            overflow-x: hidden;
            font-family: Nunito;
        }
        

        h1 {
            font-size: 250%
        }
        h3 {
            font-size: 200%
        }
        h3 {
            font-size: 150%
        }
        h4{
            font-size: 100%
        }
        h5{
            font-size: 50%
        }
        




        p {
            font-size: 140%;
            font-color:6699FF 
            line-height: 150%;
            color:6699FF;
        }
        .slide {
            position: relative;
            padding: 25vh 10%;
            min-height: 100vh;
            width: 100vw;
            box-sizing: border-box;
            box-shadow: 0 -1px 10px rgba(0, 0, 0, .7);
            -webkit-transform-style: inherit;
            transform-style: inherit;
        }
        img {
            position: absolute;
            top: 50%;
            left: 35%;
            width: 320px;
            height: 240px;
            -webkit-transform: translateZ(.25px) scale(.75) translateX(-94%) translateY(-100%) rotate(2deg);
            transform: translateZ(.25px) scale(.75) translateX(-94%) translateY(-100%) rotate(2deg);
            padding: 10px;
            border-radius: 5px;
            background: rgba(240,230,220, .7);
            box-shadow: 0 0 8px rgba(0, 0, 0, .7);
        }
        img:last-of-type {
            -webkit-transform: translateZ(.4px) scale(.6) translateX(-104%) translateY(-40%) rotate(-5deg);
            transform: translateZ(.4px) scale(.6) translateX(-104%) translateY(-40%) rotate(-5deg);
        }
        .slide:before {
            content: "";
            position: absolute;
            top: 0;
            bottom: 0;
            left:0;
            right:0;
        }
        .title {
            width: 50%;
            padding: 5%;
            border-radius: 5px;
            background: rgba(240,230,220, .7);
            box-shadow: 0 0 8px rgba(0, 0, 0, .7);
        }
        .slide:nth-child(2n) .title {
            margin-left: 0;
            margin-right: auto;
        }
        .slide:nth-child(2n+1) .title {
            margin-left: auto;
            margin-right: 0;
        }
        .slide, .slide:before {
            background: 50% 50% / cover;  
        }
        .header {
            text-align: center;
            font-size: 175%;
            color: #fff;
            text-shadow: 0 2px 2px #000;
        }
        








        #title {
            background-image: url("11.jpg");
            background-attachment: fixed;  
        }
        
        #slide1: {
            background-image: url("https://download.unsplash.com/photo-1428930377079-45a584b6dd6b");
            -webkit-transform: translateZ(-1px) scale(2);
            transform: translateZ(-1px) scale(2);
            z-index:-1;
        }
        #slide2: {
            background-image: url("https://download.unsplash.com/photo-1422207134147-65fb81f59e38");
            background-attachment: fixed;
        }
        #slide3: {
            background-image: url("https://download.unsplash.com/photo-1428976343495-f2c66e701b2b");
            -webkit-transform: translateZ(-1px) scale(2);
            transform: translateZ(-1px) scale(2);
            z-index:-1;
        }
        #slide4: {
            background-image: url("https://download.unsplash.com/photo-1428677361686-f9d23be145c9");
            background-attachment: fixed;
        }
        #slide5: {
            background-image: url("https://download.unsplash.com/photo-1425141750113-187b6a13e28c");
            -webkit-transform: translateZ(-1px) scale(2);
            transform: translateZ(-1px) scale(2);
            z-index:-1;
        }

        #slide6: {
            background-image: url("https://download.unsplash.com/photo-1428591501234-1ffcb0d6871f");
            background-attachment: fixed;

                }

        #slide7: {
            background-image: url("https://download.unsplash.com/photo-1423439793616-f2aa4356b37e");
            -webkit-transform: translateZ(-1px) scale(2);
            transform: translateZ(-1px) scale(2);
            z-index:-1;
        }
        #slide8: {
            background-image: url("https://download.unsplash.com/photo-1428591501234-1ffcb0d6871f");
            background-attachment: fixed;
        }
                #slide9: {
            background-image: url("https://download.unsplash.com/uploads/1411724908903377d4696/2e9b0cb2");
            -webkit-transform: translateZ(-1px) scale(2);
            transform: translateZ(-1px) scale(2);
            z-index:-1;
        }














    </style>
</head>

＆＃13;

<body>
    <div id="title" class="slide header">
        <h1>Loose Fit Studio</h1>
        <h4>Loose Fit is a hand-picked directory of the best high quality stock photography, deveryed to you.</h4>
    </div>
    



    <div id="slide1" class="slide">
        <div class="title">
            <h1>Slide 1</h1>
            <p>pic 1</p>
        </div>
    </div>
    



    <div id="slide2" class="slide">
        <div class="title">
            <h1>Slide 2</h1>
            <p></p>
        </div>
        <img src="https://download.unsplash.com/photo-1422433555807-2559a27433bd">
        <img src="https://download.unsplash.com/photo-1418479631014-8cbf89db3431"> 
    </div>
    


    <div id="slide3" class="slide">
        <div class="title">
            <h1>Slide 3</h1>
            <p></p>
        </div>
    </div>
    

    <div id="slide4" class="slide header">
            <div class="title">
            
    </div>
</body>

＆＃13;

Answer 1

我认为这只是一个编码不好的情况（听起来你已经长时间盯着它......发生在我们所有人身上）

在您发布的HTML中，您没有#slide4的结束标记。

<div id="slide4" class="slide">
    <div class="title">
        <h1>Slide 4</h1>
        <p></p>
    </div>
</div>

同样在你的CSS中，只为你的幻灯片ID 1-8，你在代码中有一个额外的冒号:。

   #slide8: { <--remove colon
     ...
   }

应该是这样的

   #slide8 {
     ...
   }

最后，transform标记似乎阻止了parallex正常工作，所以我删除了它。

#slide1 {
    background-image: url("https://download.unsplash.com/photo-1428930377079-45a584b6dd6b");
    -webkit-transform: translateZ(-1px) scale(2);
    transform: translateZ(-1px) scale(2);
    z-index:-1;
}

清理后，您的代码似乎运行良好。 You can see your code in action here

需要帮助添加更多照片给我的视差网站

1 个答案: