Question

我真的不知道怎么写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>

Answer 1

此解决方案正在使用一些jQuery。为了说明的目的，我正在加载html()函数，但如果你想使用load()

，你可以进行ajax调用

我在这里做了一些假设。

您希望自己的网页在一个页面和另一个页面之间切换
你希望它在我的例子中以某个间隔重新加载这是3000毫秒或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>

添加淡入淡出＆amp;刷新时淡出

1 个答案: