javascript - 如何使用 javascript 更改图像位置？如何以整数形式获取 div 宽度？

Question

对不起，如果它太傻了。我想用纯 JavaScript 自己制作一个图像 slider 。所以我使用了以下代码。我是 javascript 的初学者

<div class="w3-div" id="img-div" style="width:100%; height: 480px; border: 4px solid black;">
  <!-- i'm not making image position absolute because if i make it absolute it is not fitting in the div morever the fixed header is not working--->
<img src="assets/pics/1.jpg" id="header" class="w3-image" style="width: 100%; height:473px; padding-bottom: 0px;">
</div>
<script type="text/javascript">
  window.onload = function() {

    setInterval(changepic, 10000);
  }

  function changepic() {

    //alert("changing pic ");
    var p = document.getElementById('header');
    p.style.position = "absolute";
    //i know that style.width returns string but what else i can do?
    //loop to slide out the img from div
    for (var i = 0; i <= document.getElementById('img-div').style.width; i++) {
      p.style.left = i + "px";
      //p.style.right= i+"px";
    }
     // loop to slide in the image in div
    for (var i = document.getElementById('img-div').style.width; i >= 0; i--) {
      //p.style.left = i+"px";
      p.style.right = i + "px";
    }
    //put random image over here or just relocate the first image
    p.style.position = "relative";
    p.style.left = "0px";



  }
</script>

在此先感谢，请帮助我。网站链接是 here .( http://yirusworld.000webhostweb.com )

Answer 1

我不太明白你的问题，但我认为有几点我认为这会导致行为错误。你可以举例说明你在做什么，然后我可以提供更好的帮助。

• 您正在使用

document.getElementById('img-div').style.width

• 它返回 100% - 正是您在元素中设置的值。如果您想采用该元素的实际宽度，则应改用 offsetWidth。

var width = document.getElementById('img-div').offsetWidth;

• 对于你的循环来说，因为img-div是不变的，所以你应该把它的宽度设置成一个变量——这里是width——这样在循环过程中，js就不用去取img-div的宽度了每次运行时，它只使用可变宽度，从而获得更好的性能。

• 如果你希望你的p的位置是绝对的，添加position: relative to its parent