请老师解答一下

这个为什么idx前面要加-号？

一只少年 2021-12-06

源自：DOM 6-3 编写跑马灯轮播图特效

收起

1回答

好帮手慕慕子 2021-12-06 10:20:20

同学你好，因为图片默认显示第一张，需要将left属性设置为负值，才可以实现图片的移动，所以在idx前面添加-，表示负数。

祝学习愉快~

收起回答

提问者一只少年 #1

<body>
<div class="carousel">
<ul id="list">
<li><img src="../javascript/images/beijing/0.jpg" alt=""></li>
<li><img src="../javascript/images/beijing/1.jpg" alt=""></li>
<li><img src="../javascript/images/beijing/2.jpg" alt=""></li>
<li><img src="../javascript/images/beijing/3.jpg" alt=""></li>
<li><img src="../javascript/images/beijing/4.jpg" alt=""></li>
</ul>
<a href="javascript:;" class="leftbtn" id='leftbtn'></a>
<a href="javascript:;" class="rightbtn" id='rightbtn'></a>
</div>
<script>
var leftbtn = document.getElementById('leftbtn');
var rightbtn = document.getElementById('rightbtn');
var list = document.getElementById('list');

// 克隆第一张图片
var cloneli = list.firstElementChild.cloneNode(true);
list.appendChild(cloneli);

// 当前的ul显示到第几张了,从0开始数
var idx = 0;
// 节流锁
var lock=true;
// 右按钮监听
rightbtn.onclick = function () {
// 判断锁的状态
if(!lock)return;
lock=false;
// 给list加过渡,为什么要加??css中不是已经加了嘛?因为最后一张图片会把过渡去掉
list.style.transition = 'left .5s ease 0s'
idx++;
if (idx > 4) {
// 设置一个延时器,延时器的功能就是将ul瞬间拉回0的位置,延时器的目的就是让过渡动画结束以后拉回去
setTimeout(function () {
// 取消掉过渡,因为要的是瞬间移动,不是"咕噜"回去
list.style.transition = 'none';
list.style.left = 0;
idx = 0;
}, 500)
}
list.style.left = -idx * 650 + 'px';

setTimeout(function(){
lock=true;
},500)
}
// 左按钮监听
leftbtn.onclick = function () {
// 判断锁
if (!lock) return
lock=false;
// 判断是不是第0张,如果是,就要瞬间用假的替换真的
if (idx == 0) {
// 取消掉过渡,因为要的是瞬间移动,不是"咕噜"回去
list.style.transition = 'none';
list.style.left = -5 * 650 + 'px';
// 设置一个延时器,这个延时器的延迟时间可以是0毫秒,虽然是0毫秒,但是可以让我们过渡先是瞬间取消,然后再加上
setTimeout(function () {
// 加过渡
list.style.transition = 'left .5s ease 0';
// idx改为真正的最后一张图片
idx = 4;
list.style.left = -idx * 650 + 'px';
}, 0)
} else {
idx--;
list.style.left = -idx * 650 + 'px';
}
// 函数节流
setTimeout(function(){
lock=true;
},500)
}
</script>
他左右按钮都是是-idx啊，向左移动为负数，那为啥右按钮也是-dix？

2021-12-06 10:23:25
好帮手慕慕子回复提问者一只少年 #2

同学你好，默认开始显示第一张，可以理解为此时的left属性值0。此时有两种情况，点击左按钮或者右按钮，可以去掉外层盒子的overflow:hidden属性测试结果，如下：
（1）当你点击右按钮，显示第二张图片时，需要将第一张图片向左移动，所以此时的left属性值需要设置为负数
当你继续点击右按钮时，前面的图片继续向左移动，依然需要将left设置为负值
（2）当你点击左按钮，显示最后一张图片时，需要前面所有的图片都移动到盒子的左侧，所以此时的left属性值也需要设置为负数
当你继续点击左按钮时，从最后一张图片开始向前展示图片，直到left为0时，才会移动到第一张图片，在这个过程中left属性值也是一直为负值的。
祝学习愉快~

2021-12-06 11:12:16