1

建物の各フロアの画像を表示することになっているサイトにページがあります。現時点では、左右のパネルがあり、左側のパネルにはフロアのリストが含まれています。次に、ユーザーがこれらのリンクのいずれかをクリックして、対応する画像に到達するまで、地上から最上階まで画像を循環する画像スライダーを右側に配置できるようにする必要があります。

通常、この状況ではjqueryサイクルを使用しますが、間にあるすべての画像をすばやくフリックするには、ローテーターが必要です。

例: 10 階建ての建物があり、現在 1 階を見ています。9 階をクリックします。つまり、1 階から 9 階まですばやく移動し、最終的に 10 階で終了するには、スライダーを使用する必要があります。どうすればよいですか? 上のリンクから 10 階に移動できますが、その間のすべての階をフリックすることはできません。この効果を達成する方法を知っている人はいますか?

ありがとう！

4

1 に答える 1

3

それは実際には本当に簡単です：

jsBin デモ

次の HTML があるとします。

<div id="thumbs">
  <!-- ... more images here -->
  <img src="thumb/image_4.jpg" />
  <img src="thumb/image_3.jpg" />
  <img src="thumb/image_2.jpg" />
  <img src="thumb/image_1.jpg" />  
</div>
  
<div id="gallery">  <!-- overflow hidden -->
  <div id="slider">  <!-- position absolute -->
    <!-- ... more images here -->
    <img src="image_4.jpg" />
    <img src="image_3.jpg" />
    <img src="image_2.jpg" />
    <img src="image_1.jpg" />            
  </div>  
</div>

jQuery は次のようになります。

var galH = 320; // SET HERE THE GALLERY HEIGHT

var N = $('#slider img').length;

$('#slider').css({ top: -galH*(N-1) }); // initial kick to bring the #slider to the first image

$('#thumbs img').on('click',function(){
  N = $(this).index();
  $('#slider').stop(1).animate({top: -galH*N},1000);
});
于 2012-05-08T10:50:07.780 に答える