我正在制作可在鼠标滚动条上使用的轮播。我做了一个，但是它必须一直走到左边或右边的末尾才能看到第一个/最后一个职位，这有点令人沮丧。我想要的是进行鼠标填充，以便在我将鼠标悬停在屏幕末端（左右）之前，向我展示这些帖子。
我想要类似this（来自Roko的解决方案），但是我无法在我的项目中实现它。
$(document).ready(function() {
var EASING = 1,
FPS = 220,
$paneTarget = $('#scroll'),
$paneContainer = $('.oxy-posts'),
windowWidth = $(window).width(),
containerWidth = 0,
maxScroll = 0,
posX = 0, // Keep track of the container position with posX
targetX = 0,
animInterval = false; // No interval is set by default
$paneTarget.find('li').each(function() {
containerWidth += $(this).width();
$paneContainer.width(containerWidth);
});
// Set maximum amount the container can scroll
// negative because we're gonna scroll to left
maxScroll = -(containerWidth - windowWidth);
// This gets called from the setInterval and handles the animating of the scroll container
function animationLoop() {
var dx = targetX - posX, // Difference
vx = dx * EASING; // Velocity
// Add velocity to x position and update css with new position
posX += vx;
$paneContainer.css({
left: posX
});
// When end target is reached stop the interval
if (Math.round(posX) === targetX) {
clearInterval(animInterval);
animInterval = false;
}
}
function startAnimation() {
// Only start animation interval when it's not already running
if (!animInterval) {
animInterval = setInterval(animationLoop, 100 / FPS);
}
}
$paneTarget.on('mousemove', function(event) {
// Calculate the new x position for the scroll container
targetX = Math.round((event.pageX / windowWidth) * maxScroll);
startAnimation();
});
$(window).on('resize', function() {
windowWidth = $(window).width();
maxScroll = -(containerWidth - windowWidth);
// OPTIONAL:
// Move scrollpane to original position on resize
targetX = 0;
// Animate to newly set target
startAnimation();
});
});#scroll {
position: relative;
width: 100%;
height: calc(100vh - 100px);
overflow: hidden;
border: 40px solid #f3f3f3;
}
.oxy-posts {
position: absolute;
top: 0;
left: 0;
}
#scroll .oxy-posts {
padding: 0;
margin: 0;
}
.oxy-posts li {
float: left;
list-style: none;
width: calc((100vh - 100px) * 400 / 724);
height: calc(100vh - 100px);
display: block;
}
.oxy-posts li:hover {
transform: scale(1.051);
transition: transform 3.5s ease .3s;
z-index: 10;
}
.oxy-posts .text-container {
z-index: 2;
width: 100%;
position: absolute;
bottom: 30px;
padding: 30px;
transition: bottom .5s ease;
transform: translate3d(0, 0, 0);
}
#scroll .oxy-post-padding {
position: relative;
overflow: hidden;
width: calc((100vh - 100px) * 400 / 724);
height: calc(100vh - 180px);
display: block;
background-color: #000000;
transition: box-shadow .3s ease-out, transform .3s ease-out, opacity .2s ease-out;
transform: translateZ(0);
}
#scroll .oxy-post-image-fixed-ratio {
padding-bottom: 100%;
background-size: cover;
background-position: center center;
height: 100%;
transition: 1s ease-in-out opacity, .5s ease-in-out max-height;
}
#scroll .oxy-post-padding:hover .oxy-post-image-fixed-ratio {
opacity: .8;
}
#scroll .oxy-post-wrap {
position: absolute;
left: 0;
right: 0;
bottom: 0px;
padding: 2em;
pointer-events: none;
padding-top: 200px;
/*background-image: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,1) 300px);*/
z-index: 1;
display: flex;
flex-direction: column;
align-items: left;
text-align: left;
}
#scroll .oxy-post-content-and-link-wrap {
opacity: 0;
max-height: 0px;
overflow: hidden;
transition: 1s ease-in-out opacity, .5s ease-in-out max-height;
}
#scroll .oxy-post-padding:hover .oxy-post-content-and-link-wrap {
opacity: 1;
max-height: 400px;
}
#scroll .oxy-post-title {
font-size: 1.5em;
line-height: 1.2em;
margin-bottom: 30px;
line-height: 30px;
font-weight: bold;
color: #FFF;
text-transform: uppercase;
}
#scroll .oxy-post-content {
margin-bottom: 40px;
line-height: 30px;
color: #FFF;
}
#scroll .oxy-post-content p {
margin: 0;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div id="scroll" class="oxy-easy-posts oxy-posts-grid">
<div class="oxy-posts" style="width: 2740px; left: -44px;">
<li class="oxy-post">
<div class="oxy-post-padding">
<div class="oxy-post-image-fixed-ratio" style="background-image: linear-gradient(rgba(0,0,0,0.2),rgba(0,0,0,0.2)),url(http://lfrowkhf.preview.infomaniak.website/wp-content/uploads/2019/05/Move_Visuels_horizontal_A5-3.jpg);"></div>
<div class="oxy-post-wrap">
<a class="oxy-post-title" href="http://lfrowkhf.preview.infomaniak.website/home_kacheln/laden-ohne-abo/">What is Lorem Ipsum?</a>
<div class="oxy-post-content-and-link-wrap">
<div class="oxy-post-content">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</div>
</div>
<a id="link_button-109-25" class="ct-link-button move_button" href="http://lfrowkhf.preview.infomaniak.website/move-light/">Jetzt für Read More </a>
</div>
</div>
</li>
<li class="oxy-post">
<div class="oxy-post-padding">
<div class="oxy-post-image-fixed-ratio" style="background-image: linear-gradient(rgba(0,0,0,0.2),rgba(0,0,0,0.2)),url(http://lfrowkhf.preview.infomaniak.website/wp-content/uploads/2019/05/Move_Visuels_horizontal_A5-3.jpg);"></div>
<div class="oxy-post-wrap">
<a class="oxy-post-title" href="http://lfrowkhf.preview.infomaniak.website/home_kacheln/laden-ohne-abo/">What is Lorem Ipsum?</a>
<div class="oxy-post-content-and-link-wrap">
<div class="oxy-post-content">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</div>
</div>
<a id="link_button-109-25" class="ct-link-button move_button" href="http://lfrowkhf.preview.infomaniak.website/move-light/">Jetzt für Read More </a>
</div>
</div>
</li>
<li class="oxy-post">
<div class="oxy-post-padding">
<div class="oxy-post-image-fixed-ratio" style="background-image: linear-gradient(rgba(0,0,0,0.2),rgba(0,0,0,0.2)),url(http://lfrowkhf.preview.infomaniak.website/wp-content/uploads/2019/05/Move_Visuels_horizontal_A5-3.jpg);"></div>
<div class="oxy-post-wrap">
<a class="oxy-post-title" href="http://lfrowkhf.preview.infomaniak.website/home_kacheln/laden-ohne-abo/">What is Lorem Ipsum?</a>
<div class="oxy-post-content-and-link-wrap">
<div class="oxy-post-content">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</div>
</div>
<a id="link_button-109-25" class="ct-link-button move_button" href="http://lfrowkhf.preview.infomaniak.website/move-light/">Jetzt für Read More </a>
</div>
</div>
</li>
<li class="oxy-post">
<div class="oxy-post-padding">
<div class="oxy-post-image-fixed-ratio" style="background-image: linear-gradient(rgba(0,0,0,0.2),rgba(0,0,0,0.2)),url(http://lfrowkhf.preview.infomaniak.website/wp-content/uploads/2019/05/Move_Visuels_horizontal_A5-3.jpg);"></div>
<div class="oxy-post-wrap">
<a class="oxy-post-title" href="http://lfrowkhf.preview.infomaniak.website/home_kacheln/laden-ohne-abo/">What is Lorem Ipsum?</a>
<div class="oxy-post-content-and-link-wrap">
<div class="oxy-post-content">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</div>
</div>
<a id="link_button-109-25" class="ct-link-button move_button" href="http://lfrowkhf.preview.infomaniak.website/move-light/">Jetzt für Read More </a>
</div>
</div>
</li>
<li class="oxy-post">
<div class="oxy-post-padding">
<div class="oxy-post-image-fixed-ratio" style="background-image: linear-gradient(rgba(0,0,0,0.2),rgba(0,0,0,0.2)),url(http://lfrowkhf.preview.infomaniak.website/wp-content/uploads/2019/05/Move_Visuels_horizontal_A5-3.jpg);"></div>
<div class="oxy-post-wrap">
<a class="oxy-post-title" href="http://lfrowkhf.preview.infomaniak.website/home_kacheln/laden-ohne-abo/">What is Lorem Ipsum?</a>
<div class="oxy-post-content-and-link-wrap">
<div class="oxy-post-content">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</div>
</div>
<a id="link_button-109-25" class="ct-link-button move_button" href="http://lfrowkhf.preview.infomaniak.website/move-light/">Jetzt für Read More </a>
</div>
</div>
</li>
<li class="oxy-post">
<div class="oxy-post-padding">
<div class="oxy-post-image-fixed-ratio" style="background-image: linear-gradient(rgba(0,0,0,0.2),rgba(0,0,0,0.2)),url(http://lfrowkhf.preview.infomaniak.website/wp-content/uploads/2019/05/Move_Visuels_horizontal_A5-3.jpg);"></div>
<div class="oxy-post-wrap">
<a class="oxy-post-title" href="http://lfrowkhf.preview.infomaniak.website/home_kacheln/laden-ohne-abo/">What is Lorem Ipsum?</a>
<div class="oxy-post-content-and-link-wrap">
<div class="oxy-post-content">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</div>
</div>
<a id="link_button-109-25" class="ct-link-button move_button" href="http://lfrowkhf.preview.infomaniak.website/move-light/">Jetzt für Read More </a>
</div>
</div>
</li>
<li class="oxy-post">
<div class="oxy-post-padding">
<div class="oxy-post-image-fixed-ratio" style="background-image: linear-gradient(rgba(0,0,0,0.2),rgba(0,0,0,0.2)),url(http://lfrowkhf.preview.infomaniak.website/wp-content/uploads/2019/05/Move_Visuels_horizontal_A5-3.jpg);"></div>
<div class="oxy-post-wrap">
<a class="oxy-post-title" href="http://lfrowkhf.preview.infomaniak.website/home_kacheln/laden-ohne-abo/">What is Lorem Ipsum?</a>
<div class="oxy-post-content-and-link-wrap">
<div class="oxy-post-content">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</div>
</div>
<a id="link_button-109-25" class="ct-link-button move_button" href="http://lfrowkhf.preview.infomaniak.website/move-light/">Jetzt für Read More </a>
</div>
</div>
</li>
<li class="oxy-post">
<div class="oxy-post-padding">
<div class="oxy-post-image-fixed-ratio" style="background-image: linear-gradient(rgba(0,0,0,0.2),rgba(0,0,0,0.2)),url(http://lfrowkhf.preview.infomaniak.website/wp-content/uploads/2019/05/Move_Visuels_horizontal_A5-3.jpg);"></div>
<div class="oxy-post-wrap">
<a class="oxy-post-title" href="http://lfrowkhf.preview.infomaniak.website/home_kacheln/laden-ohne-abo/">What is Lorem Ipsum?</a>
<div class="oxy-post-content-and-link-wrap">
<div class="oxy-post-content">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</div>
</div>
<a id="link_button-109-25" class="ct-link-button move_button" href="http://lfrowkhf.preview.infomaniak.website/move-light/">Jetzt für Read More </a>
</div>
</div>
</li>
<li class="oxy-post">
<div class="oxy-post-padding">
<div class="oxy-post-image-fixed-ratio" style="background-image: linear-gradient(rgba(0,0,0,0.2),rgba(0,0,0,0.2)),url(http://lfrowkhf.preview.infomaniak.website/wp-content/uploads/2019/05/Move_Visuels_horizontal_A5-3.jpg);"></div>
<div class="oxy-post-wrap">
<a class="oxy-post-title" href="http://lfrowkhf.preview.infomaniak.website/home_kacheln/laden-ohne-abo/">What is Lorem Ipsum?</a>
<div class="oxy-post-content-and-link-wrap">
<div class="oxy-post-content">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</div>
</div>
<a id="link_button-109-25" class="ct-link-button move_button" href="http://lfrowkhf.preview.infomaniak.website/move-light/">Jetzt für Read More </a>
</div>
</div>
</li>
<li class="oxy-post">
<div class="oxy-post-padding">
<div class="oxy-post-image-fixed-ratio" style="background-image: linear-gradient(rgba(0,0,0,0.2),rgba(0,0,0,0.2)),url(http://lfrowkhf.preview.infomaniak.website/wp-content/uploads/2019/05/Move_Visuels_horizontal_A5-3.jpg);"></div>
<div class="oxy-post-wrap">
<a class="oxy-post-title" href="http://lfrowkhf.preview.infomaniak.website/home_kacheln/laden-ohne-abo/">What is Lorem Ipsum?</a>
<div class="oxy-post-content-and-link-wrap">
<div class="oxy-post-content">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</div>
</div>
<a id="link_button-109-25" class="ct-link-button move_button" href="http://lfrowkhf.preview.infomaniak.website/move-light/">Jetzt für Read More </a>
</div>
</div>
</li>
<li class="oxy-post">
<div class="oxy-post-padding">
<div class="oxy-post-image-fixed-ratio" style="background-image: linear-gradient(rgba(0,0,0,0.2),rgba(0,0,0,0.2)),url(http://lfrowkhf.preview.infomaniak.website/wp-content/uploads/2019/05/Move_Visuels_horizontal_A5-3.jpg);"></div>
<div class="oxy-post-wrap">
<a class="oxy-post-title" href="http://lfrowkhf.preview.infomaniak.website/home_kacheln/laden-ohne-abo/">What is Lorem Ipsum?</a>
<div class="oxy-post-content-and-link-wrap">
<div class="oxy-post-content">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</div>
</div>
<a id="link_button-109-25" class="ct-link-button move_button" href="http://lfrowkhf.preview.infomaniak.website/move-light/">Jetzt für Read More </a>
</div>
</div>
</li>
</div>
</div>