ギャラリーのスライドショーをランダムに作成しようとしています。私はページ上に2枚の画像を持っています。「前」と「後」です。数秒ごとにタイマーを設定して、バック画像を前面に移動し、新しいバック画像をロードします。私は基本的にコード内のイメージオブジェクトを交換することでこれをやっています。不透明度を変更すると画像の位置が壊れます
逆画像が正面画像になるので、正面画像を逆にしながら、不透明度0から不透明度1に徐々にフェードインします。次のように私はこれを実装:
var fadeOutCt = 0;
var fadeOutInterval;
// Decrements the opacity of element by amt, until cap
function decrementOpacity(element, amt, cap) {
var currentOpacity = Number(window.getComputedStyle(element).getPropertyValue("opacity"));
currentOpacity = currentOpacity - amt;
element.setAttribute("style", "opacity:" + currentOpacity);
fadeOutCt = fadeOutCt + 1;
if (fadeOutCt >= cap) {
element.setAttribute("style", "opacity:0");
clearInterval(fadeOutInterval);
}
}
// Calls decrementOpacity to fill the specified interval.
function fadeOut(element, interval) {
var currentOpacity = Number(window.getComputedStyle(element).getPropertyValue("opacity"));
fadeOutCt = 0;
if (currentOpacity > 0) {
cap = interval/10.0;
amt = 1.0/cap;
fadeOutInterval = setInterval(decrementOpacity, 10, element, amt, cap);
}
}
は別に、私は(それはまた、画像を中央)私は、ユーザーの画面に適合するようにロードした画像をリサイズ別のルーチンを持っています。私はフェードインまたはフェードアウト操作の直前にこれを実行します。
function resizeForSlideshow(imgToResize) {
// Get size of usable area for slideshow
var usableWidth = window.innerWidth;
var titleTable = document.getElementById("descTable");
var windowHeight = window.innerHeight;
var tableHeight = titleTable.offsetHeight;
var usableHeight = windowHeight - tableHeight;
// Resize containing div
var slideDiv = document.getElementById("slideDiv");
slideDiv.setAttribute("style", "height:" + usableHeight + "px");
// Get size of native image to be displayed
var nativeWidth = imgToResize.naturalWidth;
var nativeHeight = imgToResize.naturalHeight;
// Determine width-to-height ratios of those two
var windowRatio = usableWidth/usableHeight;
var imageRatio = nativeWidth/nativeHeight;
if (imageRatio > windowRatio) {
// image's width-to-height is greater than window
// image should be set to 100% width, less height
imgToResize.width = usableWidth;
imgToResize.height = usableWidth * (nativeHeight/nativeWidth);
// relocate image accordingly
var newTop = (usableHeight - imgToResize.height)/2;
imgToResize.style.left = 0;
imgToResize.style.top = newTop + "px";
}
else {
// image's width-to-height is less than window
// image should be set to 100% height, less width
imgToResize.height = usableHeight;
imgToResize.width = usableHeight * (nativeWidth/nativeHeight);
// relocate image accordingly
var newLeft = (usableWidth - imgToResize.width)/2;
imgToResize.style.top = 0;
imgToResize.style.left = newLeft + "px";
}
}
フェードインまたはフェードアウトすると、画像の位置がずれるという問題があります。中央に配置する代わりに、ページの左上に表示されます(サイズは変わりませんが)。私はいくつかのことを試しましたが、アイデアがありません。誰かがここで何がうまくいかないのか、どうやって解決できるのかを見てほしいと思っていました。
(アクション内のコードを見ている場合は役立つだろう:http://artmonitors.com/slideshow/full-slideshow.html
EDITを:私は、後で問題を考え出し 問題は不透明度を設定するsetAttribute
を使用しても、私は与えられていた位置の設定が削除されたことを手動でelement.style.opacity
を設定しています。物事が仕事作っ
これは、相対的な位置付けのために画像を重ね合わせることができないという点を除いて、この問題を解決します。その周りに良い方法がありますか? –