为什么我的幻灯片在屏幕上滚动？

问题描述 投票：0回答：2

我的代码确实被某种方式弄乱了。请，如果有人有编码天才，请索取代码，我会立即将其发送给您。我需要做的是，每当我尝试将一张幻灯片更改为另一张幻灯片时，页面就停止像500px那样向上传送。然后，我什至看不到整个幻灯片，因此我不得不再次向上滚动。超级令人沮丧。

这里是指向我网站的链接，我认为问题出在CSS或其他方面，因此请使用inspect元素。 https://fc-sales.com/felipe1.html

如果您不知道如何检查元素，请使用以下代码：


.main{

    margin-top:150px;
}



/*/////////////////////////////////////////////////////////////////////////testpage1*/

.slide-container {
width:60%;
height:auto;


margin-left: auto;
margin-right: auto;

overflow:hidden;
text-align: center;
}
.image-container {
  width:300%;
  height:auto;
  position: relative;
  transition:left 2s;
  -moz-transition:left 2s;
  -webkit-transition:left 2s;
  -o-transition: left 2s;

}
.slider-image {
float:left;
margin:0px;
padding:0px;
width:33.333%;
height:auto;
}
.button-container {
  top: -30px;
  position:relative;
}
.slider-button {
display: inline-block;
height: 20px;
width: 20px;
border-radius:10px;
background-color:white;
}


#slider-image-1:target ~ .image-container{
  left:0px;
}
#slider-image-2:target ~ .image-container{
  left:-100%;
}
#slider-image-3:target ~ .image-container{
  left:-200%;
}


.milkWhiteText{
  color:bisque;
  font-size:40px;
text-align:center;


 }

.milkWhiteText2{
  color:bisque;
  font-size:30px;



 }


#grad1 {
height:45vh;
background-color: red;
text-align:center;
font-size:8vh;
font-weight:bolder;
background-image: linear-gradient(to bottom right, aqua,chartreuse);
}


/*///////////////////////////////////////////////////////////////////home button on second test page*/

.btn {


    top: 0;

  float:left;
  background-color: rgb(80,80,80); /* Blue background */
  border: none; /* Remove borders */
  color: white; /* White text */
  padding: 12px 16px;
  font-size: 16px; /* Set a font size */
  cursor: pointer; /* Mouse pointer on hover */
}

/* Darker background on mouse-hover */

.btn:hover {
  background-color:rgb(60,60,60);
}


.btn2 {

  background-color: rgb(80,80,80); /* Blue background */
  border: none; /* Remove borders */
  color: white; /* White text */
  padding: 10px 14px; /* Some padding */
  font-size: 12px; /* Set a font size */
  cursor: pointer; /* Mouse pointer on hover */
  font-style:italic;
}

/* Darker background on mouse-hover */
.btn2:hover {
  background-color:rgb(60,60,60);
}
.btn2:hover {
    cursor:grab;

}


/*///////////////////////////////////////////////////////////////////////////////////////Testpage2*/


.body2 {background-color:rgb(40,40,40);}


.slide-container2 {
width:60%;
height:auto;


margin-left: auto;
margin-right: auto;

overflow:hidden;
text-align: center;
}



.image-container2 {
  width:500%;
  height:auto;
  position: relative;
  transition:left 2s;
  -moz-transition:left 2s;
  -webkit-transition:left 2s;
  -o-transition: left 2s;

}
.slider-image2 {
width:20%;
height: auto;
float:left;
margin:0px;
padding:0px;
}

.slider-button2 {
display: inline-block;
height: 20px;
width: 20px;
border-radius:10px;
background-color:white;
}

.button-container2 {
  top: -40px;
  position:relative;
}

#slider-image-4:target ~ .image-container2{
  left:0px;
}

#slider-image-5:target ~ .image-container2{
  left:-100%;
}
#slider-image-6:target ~ .image-container2{
  left:-200%;
}
#slider-image-7:target ~ .image-container2{
  left:-300%;
}

#slider-image-8:target ~ .image-container2{
  left:-400%;
}



/*/////////////////////////////////////////////////////////////////for our Iframe video,Let's add a video wrapper*/

.videoWrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;

}
.videoWrapper iframe {
  position: absolute;
  text-align: center;
  top: 15%;
  left: 0;
  width: 60%;
  height: 60%;
}



<!DOCTYPE html>
<html lang=us>
    <head>
<meta charset=utf-8>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


<link href="main.css" type="text/css" rel="stylesheet">

<meta name="description" content="Welcome to modern travel. The Sandpiper. It's made to be the feeling of absolute luxury. It's Beauty at its best, comfort at it's best, freedom on wheels, And it's the American Dream, at it's best."/>  

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>


    .navbar {
    z-index:1;
  overflow: hidden;
  background-color:rgb(40,40,40);
  position: fixed;
  top: 0;
  width: 100%;
}

.navbar a {
  float:left;
  display: block;
  text-align: center;
 padding:5px;
  text-decoration: none;
  font-size: 17px;
}

.navbar2 {
    z-index:1;
  overflow: hidden;
  background-color:rgb(40,40,40);
  position: fixed;
  top: 0;

  width: 100%;
  margin-top:80px;
}

.navbar2 a {
  float:left;
  display: block;
  text-align: center;
  padding:5px;
  text-decoration: none;
  font-size: 17px;
}
.main{

    margin-top:150px;
}



</style>

<title>

    Fc Sales | The Sandpiper

</title>
<meta name="keywords" content="Rv,RV's,rv, rv's rvs, RVS, FC sales, fc sales, Fc sales, FC Sales, cars, Cars, trucks, Trucks, Sandpiper, sandpiper"/>



  </head>


<body class="body2">

<div class="navbar">

<a href="index.html"> <button class="btn"><i class="fa fa-home fa-3x"></i></button></a>
<a href="about us.html"> <button class="btn"><i class="fa fa-info-circle fa-3x"></i></button></a></div>
<br><br><div class="navbar2">
<a href="felipe1.html"><button class="btn2">About The Sandpiper</button></a>
<a href="felipe2.html"><button class="btn2">About The Bighorn</button></a>
</div>
<div class="main">

<p class="milkWhiteText" style="font-style:bolder; font-style:italic; font-size 29px;">buy this today! for the extremely low, once in a lifetime special, 0% interest, 0% down, cash on the barrel head, 0% OFF, special price of $1,000,000,000</p>
<div class ="slide-container">

          <span id="slider-image-1"></span>

                  <span id="slider-image-2"></span>

                        <span id="slider-image-3"></span>




                <div class = "image-container">

                  <img src="rvk1.jpg" class="slider-image" >

                    <img src="rvk2.jpg" class="slider-image" >

                  <img src="rvk3.jpg" class="slider-image" >

                </div>
              </div>
                  <div class=button-container style="text-align:center">

                          <a href=#slider-image-1 class="slider-button"></a>

                        <a href=#slider-image-2 class="slider-button"></a>

                      <a href=#slider-image-3 class="slider-button"></a>

                  </div>

<br><br><br><br><br>


 <div class="videoWrapper">

<iframe style="margin-left:19.65vw" width="100%" height="auto" src="https://www.youtube.com/embed/APYcU16d37A?autoplay=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>





<p class="milkWhiteText" style="font-size:40px;">

<em>
 The cleanest ride.
 The safest ride.<br>
 The prettiest ride.
 Luxury at it's best.
   </em> 


</p>


  <div class ="slide-container2">
    <span id="slider-image-4"></span>
    <span id="slider-image-5"></span>
    <span id="slider-image-6"></span>
    <span id="slider-image-7"></span>
    <span id="slider-image-8"></span>
      <div class = "image-container2">
          <img src="rvb1.jpg" class="slider-image2" >
          <img src="rvb2.jpg" class="slider-image2" >
          <img src="rvb3.jpg" class="slider-image2" >
          <img src="rvb4.jpg" class="slider-image2">
          <img src="rvb5.jpg" class="slider-image2" >

  </div>
<div class=button-container2>
<a href=#slider-image-4 class="slider-button2"></a>
<a href=#slider-image-5 class="slider-button2"></a>
<a href=#slider-image-6 class="slider-button2"></a>
<a href=#slider-image-7 class="slider-button2"></a>
<a href=#slider-image-8 class="slider-button2"></a>
</div>

</div>
</div>
</body>
</html>
html css css-animations slideshow
2个回答
0
投票

具有:target伪类的元素，在单击时会导致其ID添加到当前URL，从而导致具有该ID的元素（例如https://fc-sales.com/felipe1.html#slider-image-2）被移动到窗口顶部，例如当您单击本地链接时。单击这些点之一后，在地址栏中查看URL，您将在此处看到它。

[我想应该使用Javascript来代替图像容器的动画运动，而是使用触发onclick元素的left参数动画的.image-container事件。

-1
投票
.image-container2 {
  height:849px;
  overflow: hidden;
}

容器包含不同高度的图像，这就是为什么它会跳转，页面整体高度发生变化，并尝试为幻灯片放映考虑一个框架的原因或像我的解决方案一样为容器放一个固定的高度尺寸

2种方法可以解决此问题，将高度设置为图像的最低高度或使用相同尺寸的标准图片

也请记住，当您让孩子漂浮并且不指定父母身高时，请始终使用clearfix

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.