文章/答案/技术大牛

发布

社区首页 >问答首页 >为什么我的幻灯片会在屏幕上滚动？

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

Stack Overflow用户

提问于 2020-05-19 04:15:40

回答 2查看 155关注 0票数 0

不知何故，我的代码真的是一团糟。如果有人是编码天才，请向我索要代码，我现在就会把它发给你。我所需要的就是每次我试着把一张幻灯片换成另一张幻灯片时，我的页面停止传送到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

Stack Overflow用户

回答已采纳

发布于 2020-05-19 07:58:22

当单击带有URL伪类的元素时，它们的ID将被添加到当前:target，导致具有该ID的元素(例如https://fc-sales.com/felipe1.html#slider-image-2)被移动到窗口顶部，就像您单击本地链接时一样。单击这些点中的一个后，请查看地址栏中的URL，您将在那里看到它。

我想图像容器的动画移动应该使用Javascript来完成，使用onclick事件来触发.image-container元素的left参数的动画。

票数 0

Stack Overflow用户

发布于 2020-05-19 07:25:27

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

容器包含不同高度的图像，这就是为什么它会跳跃，页面整体高度发生变化，请尝试考虑为幻灯片放映设置框架，或者像我的解决方案那样为容器设置固定高度大小

2种方法可以解决这个问题，将高度设置为图像的最低高度或使用标准的相同大小的图像

还请记住，在浮动子对象时始终使用clearfix，并且不要为父对象指定高度

票数 -1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/61878223

复制

相似问题

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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