2017-05-11 10 views
1

ギャラリーのスライドショーをランダムに作成しようとしています。私はページ上に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を設定しています。物事が仕事作っ

答えて

0

あなたがして、スタイルを閉じるべきである。?CSSでそれを中心に約

element.setAttribute("style", "opacity:" + currentOpacity +";"); 
1

方法

.slide { 
    display: block; 
    margin: auto; 
    position: relative; 
} 
+0

これは、相対的な位置付けのために画像を重ね合わせることができないという点を除いて、この問題を解決します。その周りに良い方法がありますか? –

0

この問題は後で分かりました。問題は、setAttributeを使用して不透明度を設定すると、指定した位置設定も削除されてしまうことです。手動でelement.style.opacityを設定すると、動作しました。

関連する問題