DOM6-3跑马灯轮播图的疑问
来源：1-1 课程简介
applefishfish
2022-01-14 09:42:27
跟着老师写了一下这个code但是还是有很多疑问，请老师解答，谢谢
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0;
padding:0;
}
.carousel{
width: 500px;
height: 300px;
border: 1px solid #000;
margin: 50px auto;
position: relative;
overflow: hidden;
}
.carousel ul {
list-style: none;
width: 6000px;
position: relative;
left:0px;
/* tansition属性这个没看明白，eft 1s ease 0s什么意思，为什么要加这个transition属性*/
transition:left 1s ease 0s
}
.carousel ul li {
float: left;
}
.carousel ul li img {
width:500px;
height:300px;
}
.carousel .leftbtn {
position: absolute;
left:20px;
top:50%;
margin-top: -25px;
width:50px;
height:50px;
background-color: aquamarine;
border-radius: 50%;
}
.carousel .rightbtn {
position: absolute;
top: 50%;
margin-top: -25px;
right:20px;
width:50px;
height:50px;
background-color: orange;
border-radius: 50%;
}
</style>
</head>
<body>
<div class ="carousel">
<ul id="list">
<li><img src = "./images/banner1.jpg" ></li>
<li><img src = "./images/banner2.jpg"></li>
<li><img src = "./images/banner3.jpg" ></li>
<li><img src = "./images/banner4.jpg" ></li>
<li><img src = "./images/banner5.jpg" ></li>
</ul>
<button href="javascript:;" class="leftbtn" id="leftbtn"></button>
<button href="javascript:;" class="rightbtn" id="rightbtn"></button>
</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);
var idx = 0;
rightbtn.onclick = function (){
list.style.transition = 'left .5s ease 0s';
//idx ++是什么意思
idx ++;
if (idx > 4) {
setTimeout(function () {
list.style.transition ='none';
list.style.left = 0;
idx = 0;
}, 500);
}
//不懂，list.style.color = orange是不是说list颜色是橘色， 那么这个list.style.left = left +'px';什么意思，尤其left +'px'没明白.老师又改成了list.style.left = -idx * 500 +'px';也没看明白，应该是style属性在JS中不清晰，能讲解一下吗？
list.style.left = -idx * 500 +'px';
};
//这里设置了左边按钮，但是我跟着老师写code结果页面 不运行了，但是不知道错在哪里
leftbtn.onclick = function(){
if(idx == 0){
list.style.transition = 'none';
//下面这一行没有理解什么意思
list.style.left = -6 * 500 +'px'
setTimerout(function(){
//下面这这段没有理解什么意思
list.style.transition = 'left .5s ease 0s';
idx=5;
list.style.left = -idx * 500 + 'px';
},0);
}else{
idx --;
list.style.left = -idx * 500 + 'px';
}
}
</script>
</body>
</html>
1回答
-
好帮手慕小李
2022-01-14
同学你好，解答如下：
1、transition: left 1s ease 0s; 这句话中，各个属性含义如下：
transition：用来设置过渡效果
left：作用于left属性
1s：设置过渡效果的时间为1秒
ease：设置过渡效果是ease
0s：设置过渡效果何时开始例：如让一个宽为100px的盒子，当鼠标移入到盒子上时，通过过渡效果1秒钟后变成宽为300px的盒子。
同学尝试一下上面代码的效果，是不是可以发现有了过渡效果后，效果就不再那么生硬了。这里视频中老师加的transition: left 1s ease 0s;是为了给banner图向左向右移动时添加上过渡的效果。
2、idx++是控制当前我们可以看到的是哪张图片，当点击右侧按钮时，图片应移动到下一张图片，idx相等于计数器，每点一次都把当前可以看到的banner+1（下一张banner）同理idx--（上一张banner）。
3、list.style.color = orange； 这句话的意思是，给list元素的style中的color样式设置成orange。
4、list.style.left = left +'px'；这句话的意思是，给list元素的style中的left样式设置成left + 'px'。其中的left+'px'是因为left值是个数值，例：list.style.left = 100 +'px'；如果不加'px'那么是不生效的。
5、点击左侧按钮没有生效的原因是setTimeout拼写错了。如下：
6、list.style.left = -6（这个值同学想想对不对） * 500 + 'px';这句话的意思是，给list元素的style中的left样式设置成-6 * 500（每张图片的宽度）+'px'(单位)。
7、当点击左侧按钮时，如果idx已经到了第一张时，那么开启一个延时定时器，0秒后（立即执行不等待）直接给list.style.transition重新赋值(这里的重新赋值的原因是当用户点击左侧按钮，当idx=0时我们取消了list.style.transition中的值）。idx = 5;是指当用户点击左侧按钮时，当idx已经是第一张图片。那么当用户再次点击左侧按钮时，图片直接跳转到最后一张。list.style.left = -idx * 500 + 'px';的意思是当idx已经是第一张图片，当用户再次点击左侧按钮时，让list的left也变成最后一张图片的位置。
同学尝试理解一下，祝学习愉快！
0
相似问题