上刷新

-1

在與淡出淡入添加我真的不知道怎麼寫JS上刷新

我有這樣的代碼，我使用週期2頁，我試圖在添加淡入/淡出效果刷新。

基本上我的意思是說，我希望每次刷新i幀時都有淡入/淡出效果，而且我不知道如何去做。

我是新來的請幫助。

謝謝！

代碼：

<html> 
<style type="text/css"> 
<!-- 
body { 
    overflow:hidden; 
} 
#container{ 
    width:1900px; 
    height:1080px; 
    border:0px solid #000; 
    overflow:hidden; 
    margin:auto; 
} 
#container iframe { 
    width:1920px; 
    height:1180px; 
    margin-bottom:-100px; 
    margin-top:-30px; 
    border:0 solid; 
} 
--> 
</style> 
<div id="container"> 
<iframe id="if_one" src=""></iframe> 
</div> 

<script type="text/javascript"> 
var pages = [ 
    'Page 1', 
    'Page 2' 
], p = pages.length; 
while(--p > -1){ 
    (function(p){ 
     var a = document.createElement('a'); 
     a.href = pages[p]; 
     pages[p] = a; 
    })(p); 
} 

function loadIframe() { 
var page = pages[(p = ++p % pages.length)], bust = 'bustcache=' + new Date().getTime(); 
page = page.search? page.href + '&' + bust : page.href + '?' + bust; 
document.getElementById('if_one').src = page; 

setTimeout(loadIframe, 15000); 
} 
loadIframe(); 
</script> 

</html>

來源

2016-09-15 Arthur

你提的問題是非常不清楚。你想要淡入淡出A標籤的文字？ – Saskia

看起來更像是一個CSS動畫問題，而不是javascript。我個人可能不會使用iFrame，但取決於情況iFrames不是純粹的邪惡:) – happymacarts

此問題可能的重複：http://stackoverflow.com/q/34645518/4746328 –

該解決方案是使用一些jQuery的。爲了說明的目的，我加載html()功能，但如果你想，而不是通過使用load()

我在這裏做一些假設，你可以做AJAX調用。

之間交替
這是3000ms或3秒，我認爲你希望它是15秒

pages = ['https://google.com', 'page2', 'page3','...pageN']; 
 
$(document).ready(function() { 
 
    $('.item').html(pages[0]); 
 
    clearInterval(); 
 
    count = 0; 
 
    setInterval(function() { 
 
    if(count==pages.length){ 
 
     count=0; 
 
    } 
 
    $('.item').html(pages[count]).animate({ 
 
     'opacity': 1 
 
    }, 700) 
 
    count ++; 
 
    }, 3000) 
 

 

 

 

 
})

.item { 
 
    opacity: 1; 
 
} 
 
.fadein { 
 
    opacity: 0; 
 
} 
 
.fadeout { 
 
    opacity: 1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="item">item 
 
    </div> 
 
</div>

來源

2016-09-15 23:09:40 happymacarts

回答

相關問題