效果圖：

 CSS程式碼塊：

* {
   padding: 0;
   margin: 0;
   list-style: none;
}
#imgDiv {
   background: url(img/portfolio-1.jpg) no-repeat;
   width: 750px;
   height: 350px;
   margin: auto;
   background-size: 100%;

   position: relative;
}
#huaKuai {
   width: 750px;
   height: 45px;
   background: bisque;
   margin: auto;
   border: 1px solid #000000;
 

   position: relative;
}
#huaKuai>div {
   position: absolute;
   width: 75px;
   height: 45px;
   background: darkgray;
   border: 1px solid #000000;
   border-radius: 5px;
   box-shadow: #000000 2px 2px 5px 0px;
   cursor: pointer;
}
#divMove {
   position: absolute;
   margin-top: 170px;
   width: 75px;
   height: 75px;
   background: url(../img/niubi.jpg) no-repeat;
 

   background-size: 750px 350px;
   background-position-y: -170px;
   border: 1px solid red;
   z-index: 2;
}
#divDown {
   text-align: center;
   color: black;  
   margin-top: 170px;
   position: absolute;
   width: 75px;
   height: 75px;
   border: 1px solid red;
   line-height: 32px;
   background: white;
   background-size:750px 350px ;
 

   background-position-y: -170px
}

HTML程式碼塊

<div>
<div id="imgDiv">
   <div id="divMove"></div>
   <div id="divDown">移動圖片到此處</div>
</div>
<div id="huaKuai">
   <div></div>
</div>
</div>

Scrpit程式碼塊

<script type="text/javascript">
      let huaKuai = document.querySelector('#huaKuai')
      let huaKuaiDiv = document.querySelector('#huaKuai div')
      let divDown = document.querySelector('#divDown')
      let divMove = document.querySelector('#divMove')
      let time = 0, timeOut
      huaKuai.addEventListener('mousedown',(e)=>{
         if (time == 0) {//如果time等於0則新增定時器
            time == -1
            setIntval()//當滑鼠按下時新增定時器
         }
         huaKuai.addEventListener('mousemove',move)//新增滑鼠移動事件
      })
      huaKuai.addEventListener('mouseup',(e)=>{//新增滑鼠抬起事件
         huaKuai.removeEventListener('mousemove',move)//如果滑鼠抬起則取消跟隨滑鼠移動事件
         if (divMove.offsetLeft >= divDown.offsetLeft -(20) && divMove.offsetLeft < divDown.offsetLeft+(20)) {
            //如果滑塊的offsetleft 大於 滑塊放置區域的offsetleft 並且 滑塊的offsetleft 小於 滑塊放置區域的offsetleft 
            //操作div的offsetleft必須大於指定div的offsetleft 如果有-20 則能少,
            //並且 操作div的offsetleft必須小於指定div的左邊加上 20 代表著可以多出來邊距
            alert('驗證成功,'+'您一共用了'+time/10+'秒鐘')
            clearInterval(timeOut)//清除定時器
            reStrat()//重置移動,並重新開始
            return time = 0
         }else {
            alert('驗證失敗')
            clearInterval(timeOut)//清除定時器
            reStrat()
            return time = 0
         }
      })
      function move(e) {
         //setAttribute可以設定style屬性
         if (((e.clientX-huaKuai.offsetLeft)-35) >0 && ((e.clientX-huaKuai.offsetLeft)-35) < 675) {//如果滑塊left位置小於0則不賦值並且滑塊的位置不能大於675
         divMove.setAttribute('style','left:'+((e.clientX-huaKuai.offsetLeft)-35)+'px; background-position-x:'+(-suiJiShu)+'px')
         huaKuaiDiv.setAttribute('style','left:'+((e.clientX-huaKuai.offsetLeft)-35)+'px')
         return false//取消瀏覽器預設行為,如文字拖動  
         }
      }
      let suiJiShu = Math.floor(Math.random()*750)
      suiJiShu += suiJiShu >580 ? -100: +90
      function reStrat() {//重置
      suiJiShu = Math.floor(Math.random()*750)//生成隨機數0-750
      suiJiShu += suiJiShu >580 ? -100: +90//如果隨機數大於580就-100否則+90 此做法不會讓隨機數大於750並且不會小於90
         divMove.setAttribute('style','left:'+0+'px; background-position-x:'+(-suiJiShu)+'px')//將隨機數賦值給background-position-x
         huaKuaiDiv.setAttribute('style','left:'+0+'px')//重置滑塊的初始位置
         divDown.setAttribute('style','left:'+ suiJiShu + 'px')//將滑塊放置處left賦值隨機數
         return false//取消瀏覽器預設行為
      }
      reStrat()
      function setIntval() {
            timeOut = setInterval(()=>{
               console.log(time)
               return time++ ; timeOut
            },100)
      }
   </script>
</body>