左按钮有问题 我听不懂老师说的 一会是-- 一会又删掉 一会又++ 一会又是纯数字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.carousel {
position: relative;
width: 650px;
height: 360px;
border: 1px solid #000;
margin: 50px auto;
overflow: hidden;
}
.carousel ul {
list-style: none;
width: 5000px;
position: relative;
left: 0px;
transition: left 0.6s ease 0s;
}
.carousel ul li {
float: left;
}
.carousel .leftbtn {
position: absolute;
left: 20px;
top: 50%;
width: 50px;
height: 50px;
margin-top: -25px;
border-radius: 50%;
background-color: #eee;
}
.carousel .rightbtn {
position: absolute;
right: 20px;
top: 50%;
width: 50px;
height: 50px;
margin-top: -25px;
border-radius: 50%;
background-color: #eee;
}
</style>
</head>
<body>
<div id="carousel" class="carousel">
<ul id="list">
<li><img src="./images/beijing0.jpg" alt="" /></li>
<li><img src="./images/beijing1.jpg" alt="" /></li>
<li><img src="./images/beijing2.jpg" alt="" /></li>
<li><img src="./images/beijing3.jpg" alt="" /></li>
<li><img src="./images/beijing4.jpg" alt="" /></li>
</ul>
<a href="JavaScript:;" class="leftbtn" id="leftbtn"></a>
<a href="JavaScript:;" class="rightbtn" id="rightbtn"></a>
<script>
// 得到按钮和ul-ul整体进行运动
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;
// 右按钮事件监听
rightbtn.onclick = function () {
list.style.transition = "left .6s ease 0s";
idx++;
if (idx > 3) {
setTimeout(function () {
list.style.transition = "none";
list.style.left = 0;
idx = 0;
}, 600);
}
list.style.left = -idx * 650 + "px";
};
// 左按钮事件监听
leftbtn.onclick = function () {
if (idx == 0) {
list.style.transition = "none";
list.style.left = -5 * 650 + "px";
setTimeout(function () {
list.style.transition = "left .6s ease 0s";
}, 0);
idx = 4;
list.style.left = -idx * 650 + "px";
}
};
</script>
</div>
</body>
</html>15
收起
正在回答 回答被采纳积分+1
1回答
卡布琦诺
2022-09-18 15:58:49
同学你好，左右按钮代码中的相关问题如下：
老师帮你给代码写了注释，可以结合注释再理解一下：
<script>
// 得到按钮和ul-ul整体进行运动
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;
// 右按钮事件监听
rightbtn.onclick = function () {
// 上一轮结尾时清除了过渡，所以这里需要重新添加过渡效果
list.style.transition = "left .6s ease 0s";
// 图片自增
idx++;
// 设置判断条件
// if (idx > 3) {
if (idx > 4) {
// 设置一个延时器，延时器的功能：瞬间将ul拉回0的位置，恢复idx初始值0，自动完成以上操作，不需要手动触发
setTimeout(function () {
// 取消掉过渡，让图片从克隆来的最后一张“瞬间”回到第一张
list.style.transition = "none";
list.style.left = 0;
idx = 0;
}, 600);
}
// 切换下一张图片
list.style.left = -idx * 650 + "px";
};
// 左按钮事件监听
leftbtn.onclick = function () {
// 判断是不是第0张，如果是，就要瞬间用克隆的替换真的
if (idx == 0) {
// 取消掉过渡，因为要瞬间移动
list.style.transition = "none";
// 直接瞬间移动到最后的克隆的片上
list.style.left = -5 * 650 + "px";
// 设置一个延时器，这个延时器的延时事件可以是0毫秒，功能：瞬间恢复前面取消掉的过渡。
setTimeout(function () {
// 加过渡
list.style.transition = "left .6s ease 0s";
// 来到克隆的图片后不做停留，直接过渡到最后一张真图片上，使其看起来的效果就是从第一张到最后一张真图片无缝衔接
idx = 4;
list.style.left = -idx * 650 + "px";
}, 0);
} else {
// 自减
idx--;
// 切换下一张图片
list.style.left = -idx * 650 + 'px';
}
};
</script>如果还有不懂的，可以具体描述是哪句代码不理解哦，祝学习愉快！
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星