为什么我的幻灯片在屏幕上向下滚动？
Why my slideshow is scrolling down my screen?
我的代码真的有点乱。拜托，如果有人是编码天才，请索取代码，我会立即发送给您。我所需要的只是让我的页面在每次我尝试将其中一张幻灯片更改为另一张幻灯片时停止像 500 像素那样传送。然后，我什至看不到整张幻灯片，只好再次向上滚动。超级沮丧。
这是我网站的 link，我认为问题出在 css 之类的地方，所以请使用检查元素。 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 ,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>
.image-container2 {
height:849px;
overflow: hidden;
}
容器包含不同高度的图像，所以它会跳转，页面整体高度发生变化，尝试为幻灯片放映考虑一个框架
或者像我的解决方案一样，为容器设置一个固定的高度大小
2 种方法可以解决这个问题，
将高度设置为图像的最低高度
或使用标准相同尺寸的图像
另请记住，在浮动 child 时始终使用 clearfix，并且不要为 parent
指定高度
具有 :target 伪 class 的元素在单击时会导致其 ID 添加到当前 URL，导致具有该 ID 的元素（例如 https://fc-sales.com/felipe1.html#slider-image-2) 被移动到 window 的顶部，就像您单击本地 link 时一样。单击其中一个点后，请注意地址栏中的 URL，您会在那里看到它。
我想图像容器的动画移动应该使用 Javascript 代替，使用 onclick 事件触发 left 参数的动画 [=14] =]元素.
我的代码真的有点乱。拜托，如果有人是编码天才，请索取代码，我会立即发送给您。我所需要的只是让我的页面在每次我尝试将其中一张幻灯片更改为另一张幻灯片时停止像 500 像素那样传送。然后，我什至看不到整张幻灯片，只好再次向上滚动。超级沮丧。
这是我网站的 link，我认为问题出在 css 之类的地方，所以请使用检查元素。 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 ,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>
.image-container2 {
height:849px;
overflow: hidden;
}
容器包含不同高度的图像，所以它会跳转，页面整体高度发生变化，尝试为幻灯片放映考虑一个框架 或者像我的解决方案一样，为容器设置一个固定的高度大小
2 种方法可以解决这个问题， 将高度设置为图像的最低高度 或使用标准相同尺寸的图像
另请记住，在浮动 child 时始终使用 clearfix，并且不要为 parent
具有 :target 伪 class 的元素在单击时会导致其 ID 添加到当前 URL，导致具有该 ID 的元素（例如 https://fc-sales.com/felipe1.html#slider-image-2) 被移动到 window 的顶部，就像您单击本地 link 时一样。单击其中一个点后，请注意地址栏中的 URL，您会在那里看到它。
我想图像容器的动画移动应该使用 Javascript 代替，使用 onclick 事件触发 left 参数的动画 [=14] =]元素.