JavaScript实现橱窗展示效果

1.先搭架子

        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            width: 800px;
            height: 190px;
            border: 1px solid #000;
            margin: 100px auto;
        }
        
        ul {
            list-style: none;
            display: flex;
        }
        
        ul img {
            vertical-align: top;
        }
        
        .progress {
            width: 100%;
            height: 30px;
            background: #ccc;
        }
        
        .progress>.line {
            width: 100px;
            height: 100%;
            background: orange;
            border-radius: 15px;
        }

    <div class="box">
        <ul>
            <li>
                <img src="images/img1.jpg" alt="">
            </li>
            <li>
                <img src="images/img2.jpg" alt="">
            </li>
            <li>
                <img src="images/img3.jpg" alt="">
            </li>
            <li>
                <img src="images/img4.jpg" alt="">
            </li>
            <li>
                <img src="images/img5.jpg" alt="">
            </li>
            <li>
                <img src="images/img6.jpg" alt="">
            </li>
            <li>
                <img src="images/img7.jpg" alt="">
            </li>
            <li>
                <img src="images/img8.jpg" alt="">
            </li>
            <li>
                <img src="images/img9.jpg" alt="">
            </li>
            <li>
                <img src="images/img10.jpg" alt="">
            </li>
        </ul>
        <div class="progress">
            <div class="line"></div>
        </div>
    </div>

2.逻辑部分

拿到需要操作的元素

计算ul的宽度

设置ul的宽度

计算滚动条的宽度

设置滚动条的宽度

监听鼠标按下的事件

• 拿到滚动条当前的位置
• 拿到鼠标在滚动条中按下的位置

监听鼠标移动事件

• 拿到鼠标在滚动条中移动之后的位置

• 计算偏移位

• 安全校验

• 重新设置滚动条的位置

• 计算图片的滚动距离

• 重新设置图片的位置

      
        .box {
           overflow: hidden;
        }
        
        ul {
            position: relative;
        }
        
        .progress {
            position: relative;
        }
        
        .progress>.line {
            position: absolute;
            left: 0;
            top: 0;
        }

        //1.拿到需要操作的元素
        const oUl = document.querySelector("ul");
        const oItems = oUl.querySelectorAll("li");
        const oProgress = document.querySelector(".progress");
        const oLine = document.querySelector(".line");
        const oBox = document.querySelector(".box");

        //2.计算ul的宽度
        const ulWidth = oItems[0].offsetWidth * oItems.length;

        //3.设置ul的宽度
        oUl.style.width = ulWidth + 'px';

        //4.计算滚动条的宽度
        // 滚动条的宽度/滚动条滚动范围 = 容器的宽度/内容的范围
        const progressWidth = oProgress.offsetWidth;
        const boxWidth = oBox.offsetWidth;
        const lineWidth = boxWidth / ulWidth * progressWidth;


        //5.设置滚动条的宽度
        oLine.style.width = lineWidth + 'px';
        // 计算滚动条最大能够滚动的范围
        const maxLineX = progressWidth - lineWidth;
        // 计算图片最大能够滚动的范围
        const maxImgX = boxWidth - ulWidth;

        //6.监听鼠标按下的事件
        oLine.onmousedown = function(e) {
            e = e || window.e;
            //a.拿到滚动条当前的位置
            let begin = parseFloat(oLine.style.left) || 0;

            //b.拿到鼠标在滚动条中按下的位置
            let mouseX = e.pageX - oBox.offsetLeft;

            //7.监听鼠标移动事件
            oLine.onmousemove = function(e) {
                e = e || window.e;
                //c.拿到鼠标在滚动条中移动之后的位置
                let moveMouseX = e.pageX - oBox.offsetLeft;

                //d.计算偏移位
                let offsetX = moveMouseX - mouseX + begin;

                //e.安全校验
                offsetX = offsetX < 0 ? 0 : offsetX;
                offsetX = offsetX > maxLineX ? maxLineX : offsetX;

                //f.重新设置滚动条的位置
                oLine.style.left = offsetX + 'px';

                //g.计算图片的滚动距离
                // 滚动条滚动的距离 / 滚动条最大能够滚动的范围 = 图片滚动的距离 / 图片最大能够滚动的范围
                // 滚动条滚动的距离 / 滚动条最大能够滚动的范围 * 图片最大能够滚动的范围 = 图片滚动的距离
                const imgOffsetX = offsetX / maxLineX * maxImgX;

                // h.重新设置图片的位置
                oUl.style.left = imgOffsetX + "px";
            };
        };
        document.onmouseup = function() {
            oLine.onmousemove = null;
        }