Javascript 滑块插件使用单个图像而不是多个图像

我想在我的网站中实现以下滑块：

现在，如您所见，滑块由5个图像组成。我想使用单个图像，但在显示非悬停状态时，图像应分为5个部分，以便最左侧的“图像”应聚焦在图像的左侧，第二个“图像”应显示图像的下一部分，但这是一个图像的所有部分，几乎像精灵效果，其中预览（非悬停最小化状态）基本上是单个原始大图像的特定部分

有人能帮我吗

---

谢谢你

为什么不把你的大图像分成5张呢？你可能需要一个自定义功能来移动你的图像，而不是为多图像的目的而设计的滑块

编辑：根据要求，这里有一个自定义js函数，用于滑动一张图像：

（点击按钮）

大部分魔法发生在这里：

var slideView = $('.bigImage');
var slideWidth = parseInt(slideView.css('width'));
var slideStep = slideWidth/5;

第二次编辑：我刚刚意识到你想要实现的目标。你不能试着用不同的背景位置（背景就是你的大图像）为每个面板放置div吗

为此：

HTML

---

…等等，将需要一些修改来满足您的需要

谢谢。但您知道，我感兴趣的是自定义函数…这意味着编辑源代码（.js文件），对任何一个不精通js的人来说，这有点让人困惑…我将为你构建一个快速的jq原型，没有什么暴力非常感谢你付出了额外的努力，真的很感激。是的，我明白你用背景创建div的意思，但是原始滑块使用了一个内部滑块div，而不是背景图像。因此，移动背景图像（左：）在展开时也会移动放大的图像…有什么想法吗？接受答案也会很感激：）您可以尝试的是，将一个透明的png设置为您的src，然后使用css，为每个设置一个不同的背景位置。查看我的回答中的编辑再次感谢您的回答，但这也不太好，因为背景图像预览（在悬停之前）现在非常棒，但是当您通过悬停展开图像时，图像不再居中，而且它削减了内容…我认为唯一的解决方法是在图像上悬停时重置css位置。。。

 <img src="transparent_png_1x1.png">

 img {
 /* to be sure the png covers the whole area */
 width:100%;height:100%;
 /* put your big image as the css background */
 background-image:url(bigImage.jpg);
 }

 img:nth-of-type(1) {background-position:0px 0px;}
 img:nth-of-type(2) {background-position:100px 0px;}