Question

我试图在纯JavaScript中制作某种滑块（我不能使用jQuery或其他框架，因为它适用于eBay）。

我有这样的功能：

var slider_moves = 0;
var imagecount = document.querySelectorAll(".slides_gsc > img").length;
var slide = document.getElementsByClassName('slider_img_width').offsetWidth;

    function slideLeft(){
        if(slider_moves < imagecount -1){
            document.getElementsByClassName("slides_gsc").style.right +=slide; //for me this is not working
            slider_moves++;
        }
    };

为什么它不起作用？我不能用+ =或变量来改变CSS值？

Answer 1

有几个问题。正如在其他答案中指出的那样，document.getElementsByClassName()函数将返回一个节点列表，您需要迭代它。此外，right属性通常包含一个单位（除非其值类似于inherit或auto）。假设您正在使用像素（因为您将像素值分配给slide），您可以执行以下操作：

 var slide = document.getElementsByClassName('slider_img_width')[0].offsetWidth;

然后

 var elements = document.getElementsByClassName("slides_gsc"); 
 for(var i=0;i<elements.length;i++){
     slider_moves++;
     elements[i].style.right = (slide*slider_moves)+"px";
 }

Answer 2

getElementsByClassName("slides_gsc")

将返回一个你必须循环的数组，如果你确定只有1个elem与该类一起使用

getElementsByClassName("slides_gsc")[0]

或在元素上使用Id。如果有超过1个元素使用

 var elems=document.getElementsByClassName("slides_gsc"); 
 for(var i=0;i<elems.length;i++){
     elems[i].style.right+=slide;
        slider_moves++;
 }

Answer 3

根据icke's回答，我完成了类似的代码并且它正在运行：

var slider_moves = 0;
var imagecount = document.querySelectorAll(".slides_gsc img").length;
var slide = document.getElementsByClassName('slider_img_gsc')[0].offsetWidth;

    function slideLeft(){
        if(slider_moves < imagecount -1){
            slider_moves++;
            document.getElementsByClassName("slides_gsc")[0].style.right = (slide*slider_moves)+"px";
        }
    };

当然它被称为：

<div class="right_navigation_gsc navigation_gsc" onclick = "slideRight()"></div>

非常感谢你们所有人;）

纯JavaScript中的Onclick滑块 - 事件不会更改CSS值

3 个答案: