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;
function getDivsXY(elm) {
let x = elm.offsetLeft;
elm = elm.offsetParent;
while (elm != null) {
x = parseInt(x) + parseInt(elm.offsetLeft);
y = parseInt(y) + parseInt(elm.offsetTop);
elm = elm.offsetParent;
}
return {
'xp': x,
'yp': y,
};
}
function getCursorXyInDiv(e) {
if (navigator.appVersion.indexOf("MSIE") != -1) {
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;
}