小于/小于或等于运算符无法正常工作

Question

Very simple slider with setInteval function. 具有setInteval函数的非常简单的滑块。 Please clear for me if there is some rule for this situation. 请为我清除这种情况是否有规定。 I have 5 slides, only 3 of them get shown, then slider goes to "margin-left" = "0" position, without showing the last 2 slides. 我有5张幻灯片，只显示了3张，然后滑块转到“ margin-left” =“ 0”的位置，而没有显示最后2张幻灯片。 I write in my code to return to "margin-left" = "0" only after "margin-left" reaches "2000px" or more (each slide is 500px, I have 5 slides). 我用我的代码编写，仅在“ margin-left”达到“ 2000px”或更高 （每张幻灯片为500px，我有5张幻灯片） 之后才返回“ margin-left” =“ 0” 。 In other words, slider goes back after reaching "1000px" "margin", although I write "2000px" or more. 换句话说，尽管我写的是“ 2000px”或更多，但滑块在达到“ 1000px”“ margin”后会返回。

My html is 500px < div >; 我的html是500px <div>; 2500px < ul > inside < div >; 2500px <ul>内<div>; 5 pieces of 500px < li > inside < ul >, I do not use overflow:hidden to show what happens. 在<ul>内有5个500px <li>，我不使用overflow：hidden来显示会发生什么。

<style>
    #container {
        height: 400px;
        border: 4px solid red;
    }

        #container ul {
            list-style-type: none;
            height: 100%;
            padding: 0px;
            display: flex;
            transition: all 1s ease
        }

            #container ul li {
                width: 100%;
                height: 100%
            }

                #container ul li:nth-child(1) {
                    background-color: yellow;
                    opacity: 0.5;
                }

                #container ul li:nth-child(2) {
                    background-color: green;
                    opacity: 0.5
                }

                #container ul li:nth-child(3) {
                    background-color: red;
                    opacity: 0.5
                }

                #container ul li:nth-child(4) {
                    background-color: teal;
                    opacity: 0.5
                }

                #container ul li:nth-child(5) {
                    background-color: grey;
                    opacity: 0.5
                }
</style>
<body>
    <div id="container" style="width:500px;">
        <ul style="margin:0px; width:2500px;">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>

Javascript side: JavaScript方面：

<script>
    ul_list = document.getElementsByTagName("ul")[0];
    li_list = document.getElementsByTagName("li");
    li_width = parseFloat(document.getElementById("container").style.width);
    el_width = li_width;
    li_array = Array.prototype.slice.call(li_list, 0);

    function carousel() {
        /*THIS IS MY PROBLEM, return to marginLeft = 0 when marginLeft = -2000px or more,
       in reality it executes if statement when -1000px is reached*/
        if (ul_list.style.marginLeft <= -((li_width * li_array.length) - li_width) + "px") {
            ul_list.style.marginLeft = 0 + "px";
            el_width = li_width;
        }
        else {
            ul_list.style.marginLeft = -el_width + "px";
            el_width += li_width;
        }
    }

    function call() {
        call_carousel = setInterval(carousel, 3000);
    }
    call();
</script>

Answer 1

Your logic does not work because the value returned by the ".marginLeft" call is a string. 您的逻辑不起作用，因为“ .marginLeft”调用返回的值是一个字符串。

Try this: 尝试这个：

var ulMarginLeft = parseInt(ul_list.style.marginLeft);

Answer 2

Add a new utility function like: 添加一个新的实用程序功能，例如：

function getInt(value) {
  return parseInt(value.match(/\d+/)[0]);
}

and then modify the comparison like: 然后像这样修改比较：

var marginLeft = getInt(ul_list.style.marginLeft);
var arrayMargin = getInt((li_width * li_array.length) - li_width) * -1;

// Check the values once in console for debugging
console.log( marginLeft, arrayMargin)

if (marginLeft <= arrayMargin ) {
  // Your code here....
}

小于/小于或等于运算符无法正常工作

问题描述

2 个解决方案

解决方案1
0 已采纳 2018-01-25 12:49:09

解决方案2
0 2018-01-25 12:53:25

小于/小于或等于运算符无法正常工作

问题描述

2 个解决方案

解决方案1 0 已采纳 2018-01-25 12:49:09

解决方案2 0 2018-01-25 12:53:25

解决方案1
0 已采纳 2018-01-25 12:49:09

解决方案2
0 2018-01-25 12:53:25