javascript - 香草javascript轮播不滑动
问题描述
我有一个带有主 div 的简单轮播。在主 div 内有一个宽度为 6000 像素的 ul,每当我单击右箭头或左箭头时,它就会滑动。
我将事件侦听器附加到两个箭头,因此当我单击左箭头时,我将 300px 添加到该 ul(滑块)的当前 marginLeft 和右箭头的 marginRight 300px。
问题 1:当我单击左箭头时,ul(滑块)移动但只有 1 次当我单击第二次时它不会移动,即使我将 300px 添加到 marginLeft 而不是仅添加 300px,这是我看到的一个常见错误。
问题 2:当我单击右箭头时,它根本不滑动 ul(滑块)。
代码笔: https ://codepen.io/anon/pen/bXBaYW ?editors=0110
const carousel = document.getElementById('carousel');
const leftArrow = carousel.querySelector('.carousel-left-arrow');
const rightArrow = carousel.querySelector('.carousel-right-arrow');
const slides = carousel.querySelector('.slides');
function scrollLeft() {
slides.style.marginLeft += '300px';
console.log(slides.style.marginLeft);
}
function scrollRight() {
slides.style.marginLeft -= '300px';
console.log(slides.style.marginLeft);
}
leftArrow.addEventListener('click' , scrollLeft);
rightArrow.addEventListener('click' , scrollRight);
解决方案
首先你应该像这样增加:
let marginLeft = 0; /* first define this as global */
marginLeft += 300;
slides.style.marginLeft = marginLeft + "px";
因为,"300px" + "300px" = "300px300px"
你这样做的方式,它已经成为错误的。
而且你无法获得像element.style.marginLeft
.
应该使用getComputedStyle(element).property
这是作品。
const carousel = document.getElementById('carousel');
const leftArrow = carousel.querySelector('.carousel-left-arrow');
const rightArrow = carousel.querySelector('.carousel-right-arrow');
const slides = carousel.querySelector('.slides');
let marginLeft = 0;
function scrollLeft() {
marginLeft += 300;
slides.style.marginLeft = marginLeft + "px";
console.log(getComputedStyle(slides).marginLeft);
}
function scrollRight() {
marginLeft -= 300;
slides.style.marginLeft = marginLeft + "px";
console.log(getComputedStyle(slides).marginLeft);
}
leftArrow.addEventListener('click', scrollLeft);
rightArrow.addEventListener('click', scrollRight);
#carousel {
width: 90%;
margin: 0 auto;
margin-top: 20px;
overflow: hidden;
position: relative;
}
#carousel .arrow {
position: absolute;
top: 32%;
background-color: rgba(255, 255, 255, 0.7);
border-radius: 0%;
cursor: pointer;
width: 20px;
}
#carousel .arrow img {
margin-top: 10px;
max-width: 100%;
}
#carousel .carousel-left-arrow {
width: 25px;
left: 0;
margin-left: 5px;
}
#carousel .carousel-right-arrow {
right: 0;
width: 25px;
}
#carousel .slides {
width: 6000px;
overflow: hidden;
list-style: none;
padding: 0;
transition: 0.2s;
margin-left: 0;
margin-right: 0
}
#carousel .slide {
float: left;
margin: 0 5px;
text-decoration: none;
transform: 0.2s;
color: whitesmoke;
}
#carousel .slides img {
width: 300px
}
<div id="carousel">
<span class="carousel-left-arrow arrow"><</span>
<ul class="slides">
<a href='#' class="slide">
<img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
</a>
<a href='#' class="slide">
<img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
</a>
<a href='#' class="slide">
<img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
</a>
<a href='#' class="slide">
<img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
</a>
<a href='#' class="slide">
<img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
</a>
<a href='#' class="slide">
<img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
</a>
</ul>
<span class="carousel-right-arrow arrow">></span>
</div>
推荐阅读
- python - 将数据类型从对象转换为整数
- angular - Angular2+ (9) 内容安全策略 - 如何解决不安全的内联样式?
- python - 更快地知道一个小部件是否属于小部件树
- linux - 如何在shell脚本中将数组导出为环境变量?
- java - 使用 Jsp 的单选按钮值为 null
- powershell - 我创建了一个 Hyper-V 副本警报脚本,但在满足条件时努力让它提醒我
- random - 有没有办法使用 Stata 的 rnormal() 函数从正态分布的特定十分位数中获取随机样本?
- java - 在Java中声明对象时(类名)是什么意思 - Android
- python - 如何使用 Python 抓取 RottenTomatoes 观众评论?
- r - 将 data.table 旋转到某些功能的顺序而不是某些功能的位置?