滑塊插件使用單張圖像，而不是幾個

我要實現以下滑塊到我的網站：http://simplewpthemes.com/demo/theme/?wptheme=MahasoliTribune 滑塊插件使用單張圖像，而不是幾個

現在，你可以看到，滑塊包括5張圖片。我想要使用單個圖像，但顯示非懸停狀態時圖像應分爲5個部分，以便左側的「圖像」應該對焦在圖像的左側，第二個「圖像」應顯示圖像的下一部分，但這是一個圖像的所有部分，幾乎像一個精靈效果，其中預覽（非懸停最小化狀態）基本上是單個原始大圖像的特定部分。

任何人都可以幫助我解決這個問題嗎？

謝謝

來源

2012-11-26 DextrousDave

爲什麼不把你的大圖像分成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;}

..等等，將需要一些適應，以滿足您的需求

來源

2012-11-26 10:16:33 jonBreizh

謝謝。但是你知道，這是我感興趣的自定義函數......而這意味着編輯源代碼（.js文件），以及任何一個不能流利的js，這有點令人困惑...... – DextrousDave

我會爲你建立一個快速的jq原型，沒有什麼暴力 – jonBreizh

非常感謝你的加倍努力，真的很感謝。是的，我明白你的意思是創建背景的div，但原始滑塊在滑塊div內使用，而不是背景圖像。因此，移動背景圖像（用左:)還會在放大後的圖像擴大時移動...任何想法？ – DextrousDave

滑塊插件使用單張圖像，而不是幾個

回答

相關問題