我试图用这段代码复制轮播，但按钮的行为与图像的外观不一样，而且我对代码不是很确定，因为它需要响应并在不同的屏幕上工作。
CSS
.slider {
display: inline-block;
margin: 1px;
}
.slide {
width: 300px;
height: 130px;
}
.carouselInput1 {
width: 300px;
height: 67px;
font-size: 18px;
line-height: 22px;
color: #313133;
font-family: "Arial";
font-weight: bold;
}
.carouselInput2 {
width: 260px;
height: 19px;
font-size: 14px;
line-height: 22px;
color: #000000;
font-family: "Arial";
}
HTML
<div id="carousel">
<div class="slider">
<button class= "next button">‹ </button>
<img class="slide" src="../assets/Picture1.jpg"/>
<p class="carouselInput1">Lorem Ipsum dolore test content goes here and here if there is </p>
<p class="carouselInput2">Name here, Location here</p>
</div>
<div class="slider">
<img class="slide" src="../assets/Picture2.jpg"/>
<p class="carouselInput1">Lorem Ipsum dolore test content goes here and here if there is </p>
<p class="carouselInput2">Name here, Location here</p>
</div>
<div class="slider">
<img class="slide" src="../assets/Picture3.jpg"/>
<div class="carouselInput">
<p class="carouselInput1">Lorem Ipsum dolore test content goes here and here if there is </p>
<p class="carouselInput2">Name here, Location here</p>
</div>
</div>
<div class="slider">
<img class="slide" src="../assets/Picture4.jpg"/>
<div class="carouselInput">
<p class="carouselInput1">Lorem Ipsum dolore test content goes here and here if there is </p>
<p class="carouselInput2">Name here, Location here</p>
</div>
</div>
最佳答案
对于轮播，你必须在他的 child 中设置轮播的最大宽度和高度。
你可以查看我的演示，我在其中通过你的 html/css 和 vanila JS 实现了轮播:https://codepen.io/GTech1256/pen/GRKaNLY
为了 future
- 设置
altwidthheight每个<img>上的属性 - 如果可以，请使用 flex 而不是 inline-block
- 标签
p (.carouselInput1)继承font默认情况下，您可以设置font仅在body
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="carousel">
<div class="slider">
<img class="slide" src="../assets/Picture1.jpg" alt="picture description" width="300" height="100"/>
<p class="carouselInput1">Lorem Ipsum dolore test content goes here and here if there is </p>
<p class="carouselInput2">Name here, Location here</p>
</div>
<div class="slider">
<img class="slide" src="../assets/Picture2.jpg" alt="picture description" width="300" height="100"/>
<p class="carouselInput1">Lorem Ipsum dolore test content goes here and here if there is </p>
<p class="carouselInput2">Name here, Location here</p>
</div>
<div class="slider">
<img class="slide" src="../assets/Picture3.jpg" alt="picture description" width="300" height="100"/>
<div class="carouselInput">
<p class="carouselInput1">Lorem Ipsum dolore test content goes here and here if there is </p>
<p class="carouselInput2">Name here, Location here</p>
</div>
</div>
<div class="slider">
<img class="slide" src="../assets/Picture4.jpg" alt="picture description" width="300" height="100"/>
<div class="carouselInput">
<p class="carouselInput1">Lorem Ipsum dolore test content goes here and here if there is </p>
<p class="carouselInput2">Name here, Location here</p>
</div>
<button class="prev button" disabled>‹</button>
<button class="next button">≯</button>
</div>
<script>
var btnNext = document.querySelector('.next.button');
var prevNext = document.querySelector('.prev.button');
var firstSlider = document.querySelector('.slider:first-child');
var OFFSET_STEP_PX = parseInt(window.getComputedStyle(firstSlider).width, 10);
var OFFSET_MIN = 0;
var OFFSET_MAX = (document.querySelectorAll('.slider').length - 1) * OFFSET_STEP_PX;
var current_offset_px = 0;
function setOffset(toUp) {
console.log(OFFSET_MAX)
toUp ?
current_offset_px += OFFSET_STEP_PX :
current_offset_px -= OFFSET_STEP_PX;
validateOffset() // does not go beyond
firstSlider.style.marginLeft = '-' + current_offset_px + 'px';
}
function validateOffset() {
btnNext.disabled = false
prevNext.disabled = false
if (current_offset_px > OFFSET_MAX) {
current_offset_px = OFFSET_MAX
btnNext.disabled = true
} else if (current_offset_px < OFFSET_MIN) {
current_offset_px = OFFSET_MIN
prevNext.disabled = true
}
}
btnNext.addEventListener('click', function() {
setOffset(true)
})
prevNext.addEventListener('click', function() {
setOffset(false)
})
</script>
<style>
#carousel {
position: relative;
max-width: 1000px;
max-height: 300px; /* like height of .slider */
overflow: hidden;
}
/* set button on center */
.button {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
}
.button.next {
left: auto;
right: 0;
}
.slider {
height: 300px;
width: 300px;
transition: margin 0.3s;
}
.slider {
display: inline-block;
margin: 1px;
}
.slide {
width: 300px;
height: 130px;
}
.carouselInput1 {
width: 300px;
height: 67px;
font-size: 18px;
line-height: 22px;
color: #313133;
font-family: "Arial";
font-weight: bold;
}
.carouselInput2 {
width: 260px;
height: 19px;
font-size: 14px;
line-height: 22px;
color: #000000;
font-family: "Arial";
}
</style>
</body>
</html>
关于javascript - 我正在尝试复制这个图像轮播，但我遇到了样式问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58146698/