Javascript 如何在证词的水平视图表中实现scrollIntoView
我很抱歉，也许标题让你困惑，但它正是标题所说的我想用表格作为基础制作一张证词卡，但我几乎完成了，但我无法完成最后的触摸，假设我有一个指针，所以当我单击指针时，卡将滑动到下一张卡，但似乎我对如何使用javascript实现它感到困惑。我有一个预感，我可以使用数组的孩子，并在移动的基础上的索引，但卡的证词仍然不会移动 我读了一些主题，但我想要的是这里的答案： 但我对如何实施感到困惑 这是我的代码： var slideIndex=1； 显示幻灯片幻灯片索引； //缩略图图像控件 功能测试仪{ showSlidesslideIndex=n； } 函数showSlidesn{ var i； var slides=document.getElementsByClassNameslider-item； var pointers=document.getElementsByClassNamepointer； 如果n>slides.length{ slideIndex=1 } 如果n<1{ slideIndex=slides.length } //对于i=0；iJavascript 如何在证词的水平视图表中实现scrollIntoView,javascript,html,css,Javascript,Html,Css,我很抱歉，也许标题让你困惑，但它正是标题所说的我想用表格作为基础制作一张证词卡，但我几乎完成了，但我无法完成最后的触摸，假设我有一个指针，所以当我单击指针时，卡将滑动到下一张卡，但似乎我对如何使用javascript实现它感到困惑。我有一个预感，我可以使用数组的孩子，并在移动的基础上的索引，但卡的证词仍然不会移动 我读了一些主题，但我想要的是这里的答案： 但我对如何实施感到困惑 这是我的代码： var slideIndex=1； 显示幻灯片幻灯片索引； //缩略图图像控件 功能测试仪{ sho
Lorem ipsum dolor sit，amet Concertetur Adipising Elite。如果你想阻止罪过的发生，那么你就必须避免违反《公约》的行为。这是一个很好的解释。
名称
Lorem ipsum dolor sit，amet Concertetur Adipising Elite。如果你想阻止罪过的发生，那么你就必须避免违反《公约》的行为。这是一个很好的解释。
名称
Lorem ipsum dolor sit，amet Concertetur Adipising Elite。如果你想阻止罪过的发生，那么你就必须避免违反《公约》的行为。这是一个很好的解释。
名称
Lorem ipsum dolor sit，amet Concertetur Adipising Elite。如果你想阻止罪过的发生，那么你就必须避免违反《公约》的行为。这是一个很好的解释。
名称
Lorem ipsum dolor sit，amet Concertetur Adipising Elite。如果你想阻止罪过的发生，那么你就必须避免违反《公约》的行为。这是一个很好的解释。
是这个吗 我已经说明了我在您的样式表中添加和删除的代码。整个Javascript也发生了变化。但这都是直截了当的 变量PositionPerIndex={ 1: 0, 2: -20%, 3: -40%, 4: -60%, 5: -80% }; document.queryselectoral.pointer.forEach 函数指针{ 指针.addEventListener'click'， 作用{ document.getElementByIdcontent.style.left=PositionPerIndex[此.getAttributedata索引]； } ; } ; @导入url'https://fonts.googleapis.com/css?family=Nunito&display=swap'; 黑色滑块证明卡{ 背景色：f5f7fb； 边界半径：20px； 宽度：380px； 高度：380px； 利润率：0%32px； 填充：20px； 显示：内联表； } /* =================================================================== 第一桌 =================================================================== */ 暗滑块证明{ 边界半径：20px； 保证金：20px自动； 填充：5%； 宽度：100%； /*开始移除 滚动行为：平滑； 终止 */ /*开始添加*/ 框大小：边框框； 溢出：隐藏； } 暗滑块证明容器{ 宽度：100%； 最大宽度：1200px； 左边距：自动； 右边距：自动； /*开始移除 溢出-x：自动； 滚动捕捉类型：x必填； 终止 */ /*开始添加*/ 溢出：隐藏； } 暗滑块证明。容器：：-webkit滚动条{ 宽度：0px； 背景：透明； } 暗滑块鉴定表{ 字体系列：“Nunito”，无衬线； 宽度：100%； 溢出：隐藏； 字号：0.8em； 颜色：1d3962； 边界：无； 边界顶部：无； } 暗滑块推荐tr{ 文本对齐：左对齐； 溢出：隐藏； 显示器：flex； 弯曲方向：行； /*加上这个*/ 宽度：100%； 位置：相对位置； 左：0%； 过渡：左。5s轻松； } 暗滑块证明td{ 文本对齐：左对齐； 滚动捕捉对齐：开始； /*加上这个*/ 弹性基准：20%； } 黑色滑块证词。证词名称{ 字号：1.6em； 字体大小：粗体； 颜色：1D3962； 线高：1.7em； } 黑色滑块证词。证词标题{ 字号：1.4em； 字体大小：粗体； 颜色：1D3962； 线高：1.7em； } 黑色滑块证词。证词字幕{ 字体大小：1.2米； 字体大小：正常； 颜色：7E94B3； 线高：1.7em； } 暗滑块证词。证词描述{ 字体大小：1.2米； 字体大小：正常； 颜色：1D3962； 线高：1.7em； } 暗滑块证明指针{ 光标：指针； 高度：15px； 宽度：15px； 边际：0.2px； 背景色：bbb； 边界半径：50%； 显示：内联块； 过渡：背景色0.6s； } 暗滑块证明。活动， 黑色滑块证明。指针：悬停{ 背景色：3b73c5； }名称
Lorem ipsum dolor sit，amet Concertetur Adipising Elite。如果你想阻止罪过的发生，那么你就必须避免违反《公约》的行为。这是一个很好的解释。
名称
Lorem ipsum dolor sit，amet Concertetur Adipising Elite。如果你想阻止罪过的发生，那么你就必须避免违反《公约》的行为。这是一个很好的解释。
名称
Lorem ipsum dolor sit，amet Concertetur Adipising Elite。如果你想阻止罪过的发生，那么你就必须避免违反《公约》的行为。这是一个很好的解释。
名称
Lorem ipsum dolor sit，amet Concertetur Adipising Elite。如果你想阻止罪过的发生，那么你就必须避免违反《公约》的行为。这是一个很好的解释。
名称
Lorem ipsum dolor sit，amet Concertetur Adipising Elite。如果你想阻止罪过的发生，那么你就必须避免违反《公约》的行为。请解释一下 numquam doloremque。
这里有一个更通用的答案，适用于固定尺寸。您可以将大小更改为百分比，使其适用于不同的屏幕大小 我已经在VS代码上解决了这个问题。你可以复制粘贴它然后运行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
box-sizing: border-box;
}
.main-container {
width: 100%;
max-width: 1200px;
overflow: hidden;
margin: 0 auto;
margin-bottom: 20px;
}
table.card-space{
width: 100%;
height: auto;
min-height: 400px;
position: relative;
white-space: nowrap;
margin: 0;
padding: 0;
}
tr.card-space_container{
width: 100%;
left: 0; /* Initial Position */
position: relative;
/* Make a Smooth Left Transition */
transition: left .5s ease;
padding: 15px;
margin: 0;
padding: 0;
}
td.card{
box-sizing: border-box;
margin: 0;
width: 400px;
min-height: 390px;
margin: 0;
position: relative;
}
.card-space .card .content{
width: 400px;
min-height: 100%;
background-color: #f5f5f5;
min-height: 390px;
padding: 15px;
}
.pointer-space{
text-align: center;
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.pointer-space .pointer {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.pointer-space .pointer:hover {
background-color: #3b73c5;
}
</style>
</head>
<body>
<div class="main-container">
<table class="card-space">
<tr class="card-space_container" id="card-space_container">
<td class="card">
<div class="content">
<h1>Card1</h1>
</div>
</td>
<td class="card">
<div class="content">
<h1>Card2</h1>
</div>
</td>
<td class="card">
<div class="content">
<h1>Card3</h1>
</div>
</td>
<td class="card">
<div class="content">
<h1>Card4</h1>
</div>
</td>
<td class="card">
<div class="content">
<h1>Card5</h1>
</div>
</td>
<td class="card">
<div class="content">
<h1>Card6</h1>
</div>
</td>
</tr>
</table>
</div>
<!-- The pointers/circles -->
<div class="pointer-space">
<span class="pointer" data-index="0"></span>
<span class="pointer" data-index="1"></span>
<span class="pointer" data-index="2"></span>
<span class="pointer" data-index="3"></span>
<span class="pointer" data-index="4"></span>
<span class="pointer" data-index="5"></span>
</div>
<script>
(function(){
// Get all the Pointers
var PointerList = document.querySelectorAll(".pointer");
// Get the Card container
var container = document.getElementById("card-space_container");
PointerList.forEach(function(pointer){
pointer.addEventListener('click', function(){
// First get the index represented by each pointer
var i = this.getAttribute('data-index');
// Summary:
// Then Calculate the position to which card-space_container must be set.
// examples:
// -If the index returned by a pointer is 0, then 0 x -40 = 0; so the position is set to 0px.
// -If the pointer return index as 1, then 1 x -400 = -400%;
// - etc...
container.style.left = (i * (-400)).toString().concat('px');
});
});
})();
</script>
</body>
</html>
您一次只想显示1美元？然后用指针滑动它们？@MosiaThabo感谢你的回答，不仅1我想显示证词的其余部分，而且n-1，也许是正确的说法我希望我单击或选择的证词显示在左边，这样它就变成了n，n+1，n+2，但只有n-I不会出现，你可以试一下，但将卡片向右滑动1次，这就是我想用pointerOk实现的目标，我现在明白了。让我快速看一看哇，谢谢，是的，就像你在上面做的一样，你真的在这里救了我一次谢谢你。但是我能问一些问题吗？首先，如果我有超过5张卡怎么办？我必须先确定位置吗？有没有办法让它更具活力？让我再做一个更普遍的答案，那就是n张牌。