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

..等等，需要一些改编来满足你的需求

Slider插件使用单个图像而不是几个

1 个答案: