首先把html和css的基礎樣式寫好

<style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            height: 30px;
            margin: 0 auto;
            position: relative;
            margin: 100px auto;
            width: 500px;
        }
        .box .contaner li{
            width: 100px;
            line-height: 30px;
            text-align: center;
            background-color: pink;
            float: left;
            list-style: none;
        }
        .box .yun {
            width: 100px;
            height: 30px;
            background-color: blue;
            position: absolute;
        }
       
    </style>
    <div class="box">
        <div class="yun"></div>
        <ul class="contaner">
            <li>0</li>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
 

分析功能需求

1. 滑塊隨著滑鼠動畫的移動效果

   滑塊的移動效果最好用css來做，js主要是負責邏輯

2. 滑鼠離開，滑塊又回到起始位置

3. 點選滑鼠，改變起始位置

		/*
        功能需求：
            1.yun移動後
            2.yun返回
            3.點選後改變起始位置
        */
        var start = 0;	// 控制其改變起始位置
        var box = document.querySelector('.box')
        var yun = document.querySelector('.yun');
        var contaner = document.querySelector('.contaner');
        var contaner_list = contaner.querySelectorAll('li');
       
        // 給每個li新增事件，採用閉包的思想
        for(var i =0;i < contaner_list.length; i++) {
            (function(i) {
                contaner_list[i].addEventListener('mouseover',function() {
                    yun.style.transition = 'all .2s linear 0s';
                    yun.style.left = i*100 + 'px';
                    console.log(i)
                })
                yun.onclick = function() {
                    start = this.offsetLeft;
                    console.log(start);
                }
            })(i)
        }
        box.addEventListener('mouseleave',function() {
            yun.style.transition = 'all .2s linear 0s';
            console.log(yun.className);
            yun.style.left = start + 'px';
        })
 

出現的問題

最開始的時候用的是函式function來寫動畫效果，但出現了滑塊抖動的問題

        // 動畫效果函式
        function animate(obj,target,callback) {
            clearInterval(obj.timer);
            var step;
            obj.timer = setInterval(() => {
                step = (target - obj.offsetLeft)/5;
                step = step > 0 ? Math.ceil(step):Math.floor(step);
                obj.style.left = obj.offsetLeft + step + 'px';
                if(obj.offsetLeft == target) {
                    clearInterval(obj.timer);
                    callback ?  callback(): callback;
                }
            }, 100);
        }
 

// 每個事件
var flag = true // 最開始設定為true
        for(var i =0;i < contaner_list.length; i++) {
            contaner_list[i].addEventListener('mouseover',function() {
                if(flag) {
                    flag = false;
                    animate(yun,this.offsetLeft,function() {
                        flag = true;
                    });
                }
            })
            contaner_list[i].addEventListener('mouseleave',function() {
                if(flag) {
                    flag = false;
                    animate(yun,start,function() {
                        flag = true;
                    });
                    console.log(start);
                }
            })
            contaner_list[i].addEventListener('click',function() {
                start = this.offsetLeft;
            })

出現抖動的原因在於：執行離開事件，if中的flag就不會成立，邏輯在移動比較慢的時候不會出現bug，一旦移動快了，就會有問題