Javascript 如何在使用jquery左/右悬停时设置图像序列的动画？

我是jquery新手，我想在我的frontpage上加入一些设计。但我找不到任何好的资源或例子，我如何才能做到这一点

我有一组按顺序拍摄的图像。图像就像一个弹跳的球。现在我有一个链接或锚标签。我想要的是当用户右键移动鼠标时。图像序列将增加，这意味着如果我有一个像ball1.jpg这样的图像，下一个是ball2.jpg，等等。。如果鼠标悬停在左侧，它将递减到第一个图像ball1.jpg

我有这个简单的代码

<div id="image_container">
    <!-- should be replace if hovering -->       
    <img src="/sample_layout/images/ball1.jpg" />  <!-- this is the default image -->
    <img src="/sample_layout/images/ball2.jpg" />  <!-- this will replace if hover -->
    <img src="/sample_layout/images/ball3.jpg" />  <!-- this will replace if hover -->
    <img src="/sample_layout/images/ball4.jpg" />  <!-- this will replace if hover -->
    <img src="/sample_layout/images/ball5.jpg" />  <!-- this will replace if hover -->
</div>

<ul>
      <li><a href="#" class="dropdown">HOME</a></li><!-- This will be the link I need to hover -->
      <li class="sublinks">
          <a href="#">Link 1</a>        
      </li> 
</ul>

我想做的是链接示例

---

就这些。你能给我一些参考资料吗？我该怎么做？

你可以使用

mousemove

事件来计算百分比并决定要显示哪个图像。此示例使用颜色而不是图像，您可以更改为图像。

---

我也希望这样做。 我有29个独立的图像，它们都大约在250KB到350KB之间

这是查看进度的链接

var screenWidth;
var imgblock = ['https://cdn.shopify.com/s/files/1/1835/0713/files/v1.jpg', 
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v2.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v3.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v4.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v5.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v6.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v7.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v8.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v9.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v10.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v11.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v12.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v13.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v14.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v15.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v16.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v17.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v18.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v19.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v20.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v21.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v22.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v23.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v24.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v25.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v26.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v27.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v28.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v29.jpg'];

function onMouseMove(e) {
var x = e.pageX;
var theimg = imgblock[parseInt(x / screenWidth * imgblock.length)];
$('.verve-seq').css("background-image", "url('" + theimg + "')");
}

function onResize() {
screenWidth = $(document).width();
}

$(window).on('mousemove', onMouseMove);
$(window).resize(onResize);
onResize();

我有一个主要问题。似乎每个img阵列都是单独加载的，这会将背景移除一毫秒，当鼠标从左向右移动时，背景会快速闪烁白色，反之亦然。（不建议癫痫患者服用：/）

---

我在

上发现了这个概念，这里是一个更新，尽管在加载css背景图像时仍然有闪烁，但闪烁不是恒定的，在从css加载第一个图像后会被删除。

var screenWidth;
var imgblock = ['https://cdn.shopify.com/s/files/1/1835/0713/files/v1.jpg', 
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v2.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v3.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v4.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v5.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v6.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v7.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v8.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v9.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v10.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v11.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v12.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v13.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v14.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v15.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v16.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v17.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v18.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v19.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v20.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v21.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v22.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v23.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v24.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v25.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v26.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v27.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v28.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v29.jpg'];

function onMouseMove(e) {
var x = e.pageX;
var theimg = imgblock[parseInt(x / screenWidth * imgblock.length)];
$('.verve-seq').css("background-image", "url('" + theimg + "')");
}

function onResize() {
screenWidth = $(document).width();
}

$(window).on('mousemove', onMouseMove);
$(window).resize(onResize);
onResize();