html - 当我只使用 CSS 和 HTML 时，内容在加载时跳跃

Question

我有一个内部票务系统，它不允许JS，也不完全允许所有CSS标签。出于这个原因，我不得不调整所有可能的方法来为某些图像构建一个简单的CSS滑块（仅使用CSS和HTML）。

我唯一的问题是，每当我单击 Next/Prev 按钮时，都会创建 Jump 效果，然后加载下一张图片。我试图找到一种方法，在加载下一张图片时图片保持在同一位置。我已经尝试过 max-width: 100%; height: auto; ，但仍然没有:(。

有什么建议？？？非常感谢提前

<style> 
  #slidepicswrap {
     width:640px;
     height:450px;
     margin:0 auto;
     position:relative;
     font-family:verdana, arial, sans-serif;
 } 

 #slidepicswrap #slides {
     position:absolute;
     left:0;
     top:0;
     height:450px;
     width:640px;
     overflow:hidden;
     text-align:center;
 } 

 #gallerywrapper #gallery div {
     width:640px; height:900px; 
     padding-top:10px; 
     position:relative;
 } 

 #gallerywrapper #gallery div img {
     clear:both; 
     display:block; 
     margin:0 auto; 
     border:0;
 } 

 #gallerywrapper #gallery div h3 {
     padding:10px 0 0 0; 
     margin:0; 
     font-size:18px;
 } 

 #gallerywrapper #gallery div p {
     padding:5px 0; 
     margin:0; 
     font-size:12px; 
     line-height:18px;
 } 
a {
  text-decoration: none;
  display: inline-block;
  padding: 8px 16px;
}

a:hover {
  background-color: #ddd;
  color: black;
}

.previous {
  background-color: #f1f1f1;
  color: black;
  display:inline;
  float:left;
  margin-left:80px;
}

.next {
  background-color: #4CAF50;
  color: white;
  display:inline;
  float:right;
  margin-right:80px;<span id="CmCaReT"></span>
  text-decoration:none;
}

.round {
  border-radius: 50%;
}
</style>

<div id="slidepicswrap">
<div id="slides">
<div id="pic1"><img src="https://unsplash.it/g/500/350?random" alt="Image 1" width="500" height="350" /> <a class="previous" href="#pic5" rel="nofollow">&lt;</a> <a class="next" href="#pic2" rel="nofollow">&gt;</a>
<h3>Image 1</h3>
<p>Text of image 1.</p>
</div>
<div id="pic2"><img src="https://unsplash.it/g/500/350" alt="Image 2" width="500" height="350" /> <a class="previous" href="#pic1" rel="nofollow">&lt;</a> <a class="next" href="#pic3" rel="nofollow">&gt;</a>
<h3>Image 2</h3>
<p>Text of image 2.</p>
</div>
<div id="pic3"><img src="https://unsplash.it/g/500/350?random" alt="Image 3" width="500" height="350" /> <a class="previous" href="#pic2" rel="nofollow">&lt;</a> <a class="next" href="#pic1" rel="nofollow">&gt;</a>
<h3>Image 3</h3>
<p>Text of image 3.</p>
</div>
</div>
</div>

标签： htmlcssslideshow

Answer 1

基本上你的图像在跳跃，因为你没有固定 padding-top 因此#slide的总高度正在改变

<div id="slidepicswrap">
        <div id="slides">
            <div id="pic1">
                <img src="https://unsplash.it/g/500/350?random" alt="Image 1" width="500" height="350" />
                <div>
                    <a class="previous" href="#pic5" rel="nofollow">&lt;</a>
                    <a class="next" href="#pic2" rel="nofollow">&gt;</a>
                </div>

                <h3>Image 1</h3>
                <p>Text of image 1.</p>
            </div>
            <div id="pic2"><img src="https://unsplash.it/g/500/350" alt="Image 2" width="500" height="350" />
                <div>
                    <a class="previous" href="#pic1" rel="nofollow">&lt;</a>
                    <a class="next" href="#pic3" rel="nofollow">&gt;</a>
                </div>
                <h3>Image 2</h3>
                <p>Text of image 2.</p>
            </div>
            <div id="pic3"><img src="https://unsplash.it/g/500/350?random" alt="Image 3" width="500" height="350" />
                <div>
                    <a class="previous" href="#pic2" rel="nofollow">&lt;</a>
                    <a class="next" href="#pic1" rel="nofollow">&gt;</a>
                </div>
                <h3>Image 3</h3>
                <p>Text of image 3.</p>
            </div>
        </div>
    </div>

<style>
        #slidepicswrap {
            width: 640px;
            height: 450px;
            margin: 0 auto;
            position: relative;
            font-family: verdana, arial, sans-serif;
            /* background: violet; */
            overflow: hidden;
        }
        
        #slidepicswrap #slides {
            position: absolute;
            left: 0;
            top: 0;
            height: 450px;
            width: 640px;
            overflow: hidden;
            text-align: center;
        }
        
        #gallerywrapper #gallery div {
            width: 640px;
            height: 920px;
            padding-top: 10px;
            position: relative;
        }
        
        #gallerywrapper #gallery div img {
            clear: both;
            display: block;
            margin: 0 auto;
            border: 0;
        }
        
        #gallerywrapper #gallery div h3 {
            padding: 10px 0 0 0;
            margin: 0;
            font-size: 18px;
        }
        
        #gallerywrapper #gallery div p {
            padding: 5px 0;
            margin: 0;
            font-size: 12px;
            line-height: 18px;
        }
        
        a {
            text-decoration: none;
            display: inline-block;
            padding: 8px 16px;
        }
        
        a:hover {
            background-color: #ddd;
            color: black;
        }
        
        .previous {
            background-color: #f1f1f1;
            color: black;
            display: inline;
            float: left;
            margin-left: 80px;
        }
        
        .next {
            background-color: #4CAF50;
            color: white;
            display: inline;
            float: right;
            margin-right: 80px;
            text-decoration: none;
        }
        
        .round {
            border-radius: 50%;
        }
        
        img {
            padding-top: 10px;
        }
    </style>