这种怎么实现?
点击左边的图标,中间部分向右移动一段距离(点击一次向右移动一个div的距离),当向右移动到左边的div完全显示时,左边的图标置灰。点击右边的图标,中间部分向左移动一段距离(点击一次向左移动一个div的距离),当向左移动到右边的div完全显示时,右边的图标置灰。
回复
1个回答

test
2024-07-05
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>test</title>
</head>
<style>
.main {
width: 510px;
display: flex
}
.main .box {
flex: 1;
overflow: hidden;
height: 30px;
}
.main .box .itemBox {
width: 100%;
display: flex;
transition: transform 1s;
}
.main .box .itemBox .item {
width: 80px;
height: 30px;
background: #ff0;
margin: 0 5px;
}
.main .left {
width: 30px;
height: 30px;
background: #eee;
cursor: pointer;
}
.main .right {
width: 30px;
height: 30px;
background: #f00;
cursor: pointer;
}
</style>
<body>
<div class="main">
<div id="left" class="left"></div>
<div class="box">
<div id="itemBox" class="itemBox"></div>
</div>
<div id="right" class="right"></div>
</div>
<!-- <script src="./jquery.js"></script> -->
<script>
let index = 0;
let num = 9;
let width = 90;
let itemBox = document.getElementById('itemBox');
let left = document.getElementById('left');
let right = document.getElementById('right');
itemBox.style.width = width * num;
for (let i = 0; i < num; i++) {
let div = document.createElement('div');
div.className = 'item';
div.innerText = i + 1;
itemBox.appendChild(div);
};
right.addEventListener('click', function () {
if ((num - index) > 5) {
index++;
if ((num - index) == 5) {
right.style.background = '#eee';
};
if (index > 0) {
left.style.background = '#f00';
}
itemBox.style.transform = `translateX(-${index * width}px)`;
}
});
left.addEventListener('click', function () {
if (index > 0) {
index--;
if (index == 0) {
left.style.background = '#eee';
};
if ((num - index) > 5) {
right.style.background = '#f00';
};
itemBox.style.transform = `translateX(-${index * width}px)`;
}
});
</script>
</body>
</html>
回复

适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容