Question

我遇到问题从我的脚本中获取值会在我的网站上进行更改。我想要完成的是允许用户滚动浏览页面上的某些元素，向左或向右移动。请记住，我对JavaScript不是很了解，所以这是我到目前为止所做的。

window.onload = makeActive;
function makeActive() {
var showCase = document.getElementById("showcase");
var slides = showCase.getElementsByTagName("div");
var mouseDown = false;
if(window.addEventListener) {
    showCase.addEventListener('mousedown',startDrag,false);
    document.body.addEventListener('mousemove',drag,false);
    document.body.addEventListener('mouseup',stopDrag,false);
}
else if(window.attachEvent) {
    showCase.attachEvent('onmousedown',startDrag);
    document.body.attachEvent('onmousemove',drag);
    document.body.attachEvent('onmouseup',stopDrag);
}
function startDrag(e) {
    mouseDown = true;
}
function drag(e) {
    if(mouseDown == true) {
        for(var i=0; i < slides.length; i += 1) {
            slides[i].style.left -= e.clientX + "px";
        }
    }
}
function stopDrag(e) {
    mouseDown = false;
    }
}

基本上它的作用是，它选择了我的showCase元素中的所有div元素。它继续检查我的鼠标是否悬停在它上面，如果我，它将检查我的鼠标是否已关闭，如果我的鼠标按钮关闭，它将检查我的鼠标向左或向右移动。这一切都很好，但是当我尝试在幻灯片中循环时，问题就会发挥作用，当我尝试对幻灯片进行任何形式的等式时，它会给我一个解析错误。我想这是因为当我尝试引用幻灯片时[i] .style.left以字符串形式出现。我已经尝试将其解析为数字形式，并且剥去角色，但这似乎不起作用。我也尝试使用“leftoffset”来获取值，但无论我做什么，它都会给我一个错误，即“style.left is undefined”，“NaN”或“解析错误：声明丢弃”。有更简单的方法吗？

Answer 1

我相信这就是这条线：

slides[i].style.left -= e.clientX + "px";

如果slides[i].style.left的值类似于10px，则无法减去整数值。您需要先删除“px”：

var leftPos = 0;
if(slides[i].style.left) {
    leftPos =  slides[i].style.left.toString().replace(/(px)/i, "");
}
slides[i].style.left = (leftPos - e.clientX) + "px";

无法通过JavaScript更改页面样式

1 个答案: