Style.width和left不起作用

Question

I want to make the effect of a "photo strip" in a menu div with this background 我想在具有此背景的菜单div中制作“照片带”的效果

http://3.bp.blogspot.com/_Y_uUwNwvSU8/SJUSQzlYMXI/AAAAAAAAAA8/5IYVcaRaJDA/S660/tira%2Bfotografica.jpg http://3.bp.blogspot.com/_Y_uUwNwvSU8/SJUSQzlYMXI/AAAAAAAAAA8/5IYVcaRaJDA/S660/tira%2Bfotografica.jpg

Im changing the width and left of the div to simulate this effect with javascript/jquery but it doesn't work this way, for now is "onclick" but i want to make it automatically may be with setInterval ? 我更改了div的宽度和左侧，以使用javascript / jquery模拟这种效果，但这种方式无法正常工作，目前是“ onclick”，但我想使其自动与setInterval一起使用吗？

Here's the HTML Code: 这是HTML代码：

<!DOCTYPE html>
<html>
<head>
    <title>Prueba</title>
    <link type = "text/css" rel = "stylesheet" href = "PruebaIndex.css">
    <script type = "text/javascript" src = "jquery-2.1.4.js"></script>
    <script>
        $(document).ready(function(){
            var slider = document.getElementById("#slider");
            var speed = 10;
            $("#slider").click(function(){
                slider.style.width = (slider.style.width+speed)+"px";
                slider.style.left = (slider.style.left-speed)+"px";
            });
        });
    </script>
</head>

<body>
    <div id = "wrapper">
        <div id = "slider">

        </div>
    </div>
</body>
</html>

And here's the CSS Code: 这是CSS代码：

*{
    padding: 0;
    margin: 0;
}

#slider {
    padding: 0;
    margin: 0;
    background-color: black;
    background-image: url("TiraFotografica.PNG");
    background-repeat: repeat;
    width: 800px;
    height: 304px;
    position: relative;
    overflow: hidden;
}

#wrapper {
    width: 800px;
    height: 1000px;
    margin: 0 auto;
    text-align: center;
    overflow: hidden;
}

I tried anothers different ways, like window.onload , putting the code after all in body , trying $(object).width, etc.. the problem is that when i click this doesn't move, then later i'll try to do automatically.. 我尝试了另一种不同的方式，例如window.onload ，将代码毕竟放在了正文中 ，尝试了$（object）.width等。问题是当我单击此按钮时，它不会移动，然后稍后我将尝试自动做..

I have another doubt, this menu will get divs inside (options), when i make this div ("#slider") move, those divs moves too (the options)? 我还有一个疑问，这个菜单会进入divs（选项），当我移动该div（“＃slider”）时，那些divs也移动（选项）吗？

EDIT: I added this by DinoMyte 编辑：我通过DinoMyte添加了此

var speed = 10;
$("#slider").click(function(){
    $(this).css("width",(parseInt($(this).css("width").replace("px","")) + speed) + "px");
    $(this).css("left",(parseInt($(this).css("left").replace("px","")) - speed) + "px");
});

Now it works fine, just need to make this automatically without clicks 现在它可以正常工作，只需要自动执行即可，无需点击

sorry for my bad english.. 对不起，我的英语不好..

Answer 1

The issue is that slider.style.width would give you the width + "px" , so (slider.style.width+speed) isn't going to work. 问题在于， slider.style.width会给您宽度+“ px”，因此(slider.style.width+speed)无法使用。 You need to replace "px" first. 您需要先替换“ px”。 Also you need to parse the current width value to an integer. 另外，您需要将当前的宽度值解析为整数。

slider.style.width = parseInt(slider.style.width.replace("px","")) +speed)+"px";

The better way to do this : 更好的方法是：

  var speed = 10;
    $("#slider").click(function(){
        $(this).css("width",(parseInt($(this).css("width").replace("px","")) + speed) + "px");
        $(this).css("left",(parseInt($(this).css("left").replace("px","")) - speed) + "px");
    });

https://fiddle.jshell.net/a2n234eq/6/ https://fiddle.jshell.net/a2n234eq/6/

Style.width和left不起作用

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-11-18 21:10:15

Style.width和left不起作用

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-11-18 21:10:15

解决方案1
1 已采纳 2015-11-18 21:10:15