javascript - 滑块插件使用单个图像而不是几个

Question

我想在我的网站中实现以下滑块：http ://simplewpthemes.com/demo/theme/?wptheme=MahasoliTribune

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

谁能帮我解决这个问题？

谢谢

Answer 1

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

编辑：这里的要求是滑动一个图像的自定义 js 函数：

http://jsfiddle.net/ktNxN/（点击按钮）

大多数魔法都发生在这里：

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

第二次编辑：我现在才意识到你想要达到的目标。您不能尝试为每个面板放置具有不同背景位置的 div（背景将是您的大图像）

去做这个 ：

HTML

 <img src="transparent_png_1x1.png">

CSS

 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;}

..等等，需要一些适应来满足你的需要