0

計算で画像を配置する画像スライダーを作りました

image.pc = my.percentLandscape;
image.style.left =  xs - (image.pc / 2) / z * my.size +'px';

画像間のギャップを増やしたいここに画像の説明を入力。left プロパティの値を動的に計算する方法。

私はimageFlow http://finnrudolph.de/ImageFlow/Introductionを使用しています

4

3 に答える 3

2

cssを修正してみましたか?

.imageflow img { margin: 0 50px;}

そのWebサイトでcssを直接変更しようとしたときに、これはうまくいったようです

編集

申し訳ありませんが、上記の私の解決策は間違っていました。プラグインをダウンロードして詳細を調べました。各画像は絶対位置であり、位置は動的に計算されるため、javascript を変更してスペースを増やす必要があります。

サイトがどこかにアップロードされている場合は、詳細を調べることができますが、Web サイトからダウンロードできるサンプルから、javascript で次のコードを編集できます。

ファイル: imageflow.js

line: 583: image.style.left = xs - (image.pc / 2) / z * my.size + (50 * index) + 'px';

私は追加しました

(50 * index)

そのため、各画像間に 50 ピクセルが追加されます。

編集2

最初の編集で行った変更により、すべての画像が右に移動しました。表示されたインデックスと非表示のインデックスを再計算するだけです。

543行目に、次の行を追加しました

/* Main loop */
var firstImageIndex = -1;   <---------------------------------this one
for (var index = 0; index < my.max; index++)

次に、560行目に、次の行を追加しました

else
{
   if (firstImageIndex < 0)  <---------------------------------this line
      firstImageIndex = index; <-------------------------------this line

   var z = (Math.sqrt(10000 + x * x) + 100) * (my.imagesM + 5);
   var xs = x / z * my.size + my.size;

次に、編集 1 で編集した行で、ロジックを次のように変更します。

image.style.left = xs - (image.pc / 2) / z * (my.size - 50) + (10 * (index - firstImageIndex)) + 'px';

これがわかりにくかったり、機能しない場合はお知らせください。編集した JavaScript をお送りします。

幸運を

編集 3 いくつかの変更を加えました。これらのコードの場所は、編集 2 領域と同じです。

First section
    /* Main loop */
    var firstImageIndex = -1;
    var scaleLevel = 5; // higher the number, it will scale it smaller
    var extraSpaceBetweenImage = 100; //extra Space Between Images measured by px
    var shiftLeftLevel = 4; // shift the for image element to the left,

第二部

if (firstImageIndex < 0)
     firstImageIndex = index;

var z = (Math.sqrt(10000 + x * x) + 100) * (my.imagesM + scaleLevel);

第3セクション

image.style.left = xs - (image.pc / 2) / z * (my.size - 50) + (extraSpaceBetweenImage * (index - firstImageIndex - shiftLeftLevel)) + 'px';
于 2013-05-14T07:51:30.150 に答える
-1

なぜ画像leftright余白を設定するのか、これを行うことができます。

次の CSS クラスにマージンを追加します。

.imageflow img {
    margin: 0 30px 0 30px; // Add this line in your CSS
}
于 2013-05-14T07:50:06.827 に答える