无法通过JavaScript更改页面样式



我在从脚本中获取值时遇到问题,请更改我的网站。我试图实现的是,允许用户向左或向右滚动我页面上的一些元素。请记住,我不太擅长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未定义"、"NaN"或"解析错误:声明已删除"。有更简单的方法吗?

我相信是这一行:

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";

相关内容

  • 没有找到相关文章

最新更新