SOURCE

console 命令行工具 X clear

                    
>
console
var speed = 0;
var scroll = 0;
var container = document.querySelector(".carousel-frame");
console.log(container);
var container_w = container.offsetWidth;
console.log(container_w);

function updateData(){
  container_w = container.offsetWidth;
}

var rect = container.getBoundingClientRect();

container.addEventListener('mousemove', function(e) {
  let xy_pos = getDivsXY(this);
  let mouse_x = 0;
  let y = 0;
  
  // Get X and Y position of the elm
function getDivsXY(elm) {
  let x = elm.offsetLeft; // set x to elm’s offsetLeft
  elm = elm.offsetParent; // set elm to its offsetParent
  //use while loop to check if elm is null
  // if not then add current elm’s offsetLeft to x
  //offsetTop to y and set elm to its offsetParent
  while (elm != null) {
    x = parseInt(x) + parseInt(elm.offsetLeft);
    y = parseInt(y) + parseInt(elm.offsetTop);
    elm = elm.offsetParent;
  }

  // returns an object with "xp" (Left), "=yp" (Top) position
  return {
    'xp': x,
    'yp': y,
  };
}
    // Get Cursor's X, Y coords, and displays Mouse coordinates
function getCursorXyInDiv(e) {
  
  // if IE
  if (navigator.appVersion.indexOf("MSIE") != -1) {
    // in IE scrolling page affects mouse coordinates into an element
    // This gets the page element that will be used to add scrolling value to correct mouse coords
    let standardBody = (document.compatMode == 'CSS1Compat') ? document.documentElement: document.body;

    mouse_x = event.clientX + standardBody.scrollLeft;
   
  } else {
    mouse_x = e.pageX;
   
  }

  mouse_x = mouse_x - xy_pos['xp'];

  
  let hotspot = 150;
    console.log("这是mouseperc: "+mouseperc);
    if(mouse_x >= hotspot && mouse_x <= container_w - hotspot) {
        speed = 0;
    }
    else if( mouse_x > container_w - hotspot){
        speed = 10;
        console.log("这是speed right: "+speed);
    }else {
        speed = -10;
        console.log("这是speed left: "+speed);
    }
});
container.addEventListener('mouseleave', function() {
    speed = 0;
});


function updatescroll() {
  var max_scroll = container.scrollWidth - container.offsetWidth;
    if (speed !== 0) {
        scroll += speed / 5;
      var max_scroll = container.scrollWidth - container.offsetWidth;
        if (scroll < 0) scroll = 0;
        if (scroll > max_scroll) scroll = max_scroll;
        container.scrollLeft = scroll;
    }
    document.querySelector('#speed').innerHTML = 'Speed: ' + speed;
    document.querySelector('#scroll').innerHTML = 'Scroll: ' + scroll;
    window.requestAnimationFrame(updatescroll);
}
window.requestAnimationFrame(updatescroll);
<body>
<div class="carousel-frame" onresize="updateData()">
    <ul>
        <li class="carousel-item">
            <img src="http://placehold.it/200x150" />
        </li>
        <li class="carousel-item">
            <img src="http://placehold.it/200x150" />
        </li>
        <li class="carousel-item">
            <img src="http://placehold.it/200x150" />
        </li>
        <li class="carousel-item">
            <img src="http://placehold.it/200x150" />
        </li>
        <li class="carousel-item">
            <img src="http://placehold.it/200x150" />
        </li>
        <li class="carousel-item">
            <img src="http://placehold.it/200x150" />
        </li>
        <li class="carousel-item">
            <img src="http://placehold.it/200x150" />
        </li>
    </ul>
</div>
<div id="speed"></div>
<div id="scroll"></div>

</body>
.carousel-frame {
    width: 100%;
    margin-bottom: 0.5em;
    padding-bottom: 1em;
    position: relative;
    overflow-x: auto;
    white-space: nowrap;
}

.carousel-frame ul {
    margin: 0;
    padding: 0;
    height: 100%;
    list-style: none;
}
.carousel-frame li.carousel-item {
    cursor: pointer;
    display: inline-block;
    margin: 0 5px 0 0;
    padding: 0;
}