請JS高手幫看看這段滾動條代碼,為什么offsetWidth值如果刷新自己會不斷變化?

1.為什么刷新頁面offsetWidth值自己會不斷變化?如果可能的話請把此段代碼運行一下就知道了,刷新的話會自動變?yōu)?00或者0.另外我在實現(xiàn)拖拽功能良好的情況下增加了點擊滑道滑塊自動就位的功能,但是出現(xiàn)了兩個事件沖突的現(xiàn)象,請問這個問題該如何解決?
2.頁面代碼

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ffg</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;

        }

        .box {
            width: 800px;
            height: 150px;
            margin: 50px auto;
            background-color: rgb(206, 206, 206);
            position: relative;
        }

        .leftBtn {
            float: left;
            padding-top: 20px;

        }

        .leftBtn a {
            display: block;
            width: 20px;
            height: 65px;
            background: url(images/bg05.png) no-repeat 0 0;

        }

        .rightBtn {
            float: left;
            padding-top: 20px;

        }

        .rightBtn a {
            display: block;
            width: 20px;
            height: 65px;
            background: url(images/bg05.png) no-repeat -40px 0;
        }

        .imgList {
            float: left;
            height: 150px;
            width: 760px;
            overflow: hidden;
            position: relative;
        }

        .m_unit {
            width: 1000%;
            height: 130px;
            position: absolute;
            top: 0;
            left: 0;
        }

        .m_unit ul {
            list-style: none;
        }

        .m_unit ul li {
            float: left;
            margin-right: 10px;
        }

        .scrollWay {
            width: 100%;
            height: 20px;
            background-color: rgb(66, 66, 66);
            position: absolute;
            bottom: 0;
        }

        .scrollBlock {
            position: absolute;
            left: 0;
            top: 2px;
            width: 300px;
            height: 15px;
            /* background-color: red; */
            background: url(images/bg07.png) 0 31px;
        }

        .sBleft {
            position: absolute;
            top: 0;
            left: 0;
            width: 11px;
            height: 15px;
            background: url(images/bg07.png) 0 0;
        }

        .sBright {
            position: absolute;
            top: 0;
            right: 0;
            width: 11px;
            height: 15px;
            background: url(images/bg07.png) -24px 0;
        }

        .sBcenter {
            position: absolute;
            top: 0;
            left: 50%;
            margin-left: -7px;
            width: 14px;
            height: 15px;
            background: url(images/bg07.png) -46px 0;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="leftBtn" id="leftBtn">
            <a href="javascript:;"></a>
        </div>
        <div class="imgList" id="imgList">
            <div class="m_unit" id="m_unit">
                <ul>
                    <li>
                        <img src="images/0.png" alt="">
                    </li>
                    <li>
                        <img src="images/1.png" alt="">
                    </li>
                    <li>
                        <img src="images/2.png" alt="">
                    </li>
                    <li>
                        <img src="images/3.png" alt="">
                    </li>
                    <li>
                        <img src="images/4.png" alt="">
                    </li>
                    <li>
                        <img src="images/5.png" alt="">
                    </li>
                    <li>
                        <img src="images/6.png" alt="">
                    </li>
                    <li>
                        <img src="images/7.png" alt="">
                    </li>
                    <li>
                        <img src="images/8.png" alt="">
                    </li>
                    <li>
                        <img src="images/9.png" alt="">
                    </li>
                    <li>
                        <img src="images/0.png" alt="">
                    </li>
                </ul>
            </div>
            <div class="scrollWay" id="scrollWay">
                <div class="scrollBlock" id="scrollBlock">
                    <div class="sBleft"></div>
                    <div class="sBright"></div>
                    <div class="sBcenter"></div>
                </div>
            </div>
        </div>
        <div class="rightBtn" id="rightBtn">
            <a href="javascript:;"></a>
        </div>
    </div>
    <script type="text/javascript">
        //首先得到可能要用到各種元素
        var scrollBlock = document.getElementById("scrollBlock");
        var scrollWay = document.getElementById("scrollWay");
        var leftBtn = document.getElementById("leftBtn");
        var rightBtn = document.getElementById("rightBtn");
        var imgList = document.getElementById("imgList");
        var m_unit = document.getElementById("m_unit");
        var lis = document.getElementById("m_unit").getElementsByTagName("li");

        //計算比率
        var rate = imgList.offsetWidth / (210 * lis.length);
        console.log("輸入第一個LI的OFFSET值是" + lis[0].offsetWidth);
        scrollBlock.style.width = scrollWay.offsetWidth * rate + "px";
        //給滑塊添加監(jiān)聽
        scrollBlock.onmousedown = function (event) {
            event = event || window.event;
            //記錄滑塊差值
            var Dvalue = event.clientX - scrollBlock.offsetLeft;
            //開始移動監(jiān)聽
            document.onmousemove = function (event) {
                event = event || window.event;
                var x = event.clientX - Dvalue;

                //驗收
                if (x > scrollWay.offsetWidth - scrollBlock.offsetWidth) {
                    x = scrollWay.offsetWidth - scrollBlock.offsetWidth;
                } else if (x < 0) {
                    x = 0;
                }
                scrollBlock.style.left = x + "px";
                //圖片運動
                m_unit.style.left = -x / rate + "px";
                //釋放監(jiān)聽
                document.onmouseup = function () {
                    document.onmousemove = null;
                }
                //阻止默認(rèn)事件
                event.preventDefault();
                return false;
            }


        }
        //給滑塊添加監(jiān)聽
        leftBtn.onclick = function () {
            var x = scrollBlock.offsetLeft - 50;
            //驗收
            if (x > scrollWay.offsetWidth - scrollBlock.offsetWidth) {
                x = scrollWay.offsetWidth - scrollBlock.offsetWidth;
            } else if (x < 0) {
                x = 0;
            }

            scrollBlock.style.left = x + "px";
            m_unit.style.left = -x / rate + "px";
        }
        rightBtn.onclick = function () {
            var x = scrollBlock.offsetLeft + 50;
            //驗收
            if (x > scrollWay.offsetWidth - scrollBlock.offsetWidth) {
                x = scrollWay.offsetWidth - scrollBlock.offsetWidth;
            } else if (x < 0) {
                x = 0;
            }
            scrollBlock.style.left = x + "px";
            m_unit.style.left = -x / rate + "px";
        }

        //給滑道添加事件
        scrollWay.onclick = function (event) {
            event = event || window.event;
            //驗收
            var msx = event.offsetX;
            if (msx > scrollBlock.offsetLeft) {
                msx = event.offsetX - scrollBlock.offsetWidth;
            } else if (msx < scrollBlock.offsetLeft) {
                msx = event.offsetX;
            };
            scrollBlock.style.left = msx + "px";
            m_unit.style.left = -msx / rate + "px";
            return false;
        }
    </script>
</body>

</html>

3.圖片圖片描述

圖片描述

4.如果有可能煩請大神運行一下幫忙看下為何會出現(xiàn)兩個事件就會不兼容有沒有可以解決的方案萬分感謝!!

回答

編輯回答

黑與白

為什么刷新頁面offsetWidth值自己會不斷變化?
因為你的li本身沒有寬度，當(dāng)其中的img下載完成后，才撐起寬度。頁面刷新時，當(dāng)img沒有下載完成時，這個li的offsetWidth就是0，恰巧你js執(zhí)行打印操作前img下載完成了，就會打印真實寬度。
解決方法是把你那一堆js放到window onload事件中，即等待頁面所有元素加載完成再執(zhí)行腳本。
window.onload = function() {//放到這里};
事件沖突？
這個你在問題中沒有說明白誰和誰沖突了?？瓷先ナ莝crollBlock.onmousedown和onmouseup組合（兩個組合相當(dāng)于一個click）與 scrollWay.click沖突了？那你在定義處理方法是，使用 event的target屬性判斷一下事件來源就好了。
你代碼寫的確實有點怪
document.onmouseup為什么寫在了 onmousedown里面，并列寫會更合理一點。

2017年6月4日 22:02