0

次のスライダーを自分の Web サイトに実装したい: http://simplewpthemes.com/demo/theme/?wptheme=MahasoliTribune

ご覧のとおり、スライダーは 5 つの画像で構成されています。単一の画像を使用したいのですが、非ホバー状態を表示するときに画像を 5 つの部分に分割して、一番左の「画像」が画像の左側に焦点を合わせ、2 番目の「画像」が表示されるようにする必要があります。画像の次の部分ですが、これはすべてスプライト効果のような 1 つの画像の一部であり、プレビュー (非ホバー最小化状態) は基本的に単一の元の大きな画像の特定の部分です。

誰でもこれで私を助けることができますか？

ありがとうございました

4

1 に答える 1

1

大きな画像を5つに分割してみませんか？マルチ画像の目的で考えられて構築されたスライダーではなく、画像を移動するカスタム関数が必要になる場合があります。

編集：ここで要求されているように、1つの画像をスライドさせるカスタムjs関数です：

http://jsfiddle.net/ktNxN/（ボタンをクリック）

魔法のほとんどはここで起こります：

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

2番目の編集：私はちょうど今あなたが達成したいことを実現します。背景の位置が異なる（背景が大きな画像になる場所）パネルごとに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-26T10:16:33.240 に答える