2016-05-30 21 views
0

嗨,我已經創建了下面的HTML頁面與旋轉3鏈接的iframe如何添加淡出和實際上旋轉鏈接時?如何在iframe中添加淡入/效果鏈接旋轉

<!doctype html> 
 
<html> 
 
<head> 
 
</head> 
 
    <body> 
 
     <iframe id="foo" style="overflow: hidden; height: 100%; width: 100%; position: absolute;" height="100%" width="100%"></iframe> 
 
     <script> 
 
      (function() { 
 
       var e = document.getElementById('foo'), 
 
        f = function(el, url) { 
 
         el.src = url; 
 
        }, 
 
        urls = [ 
 
        'http://link1', 
 
        'http://link2' 
 
        ], 
 
        i = 0, 
 
        l = urls.length; 
 

 
        (function rotation() { 
 
         if (i != l-1) { 
 
          i++ 
 
         } else { 
 
          i = 0; 
 
         } 
 
         f(e, urls[i]); 
 
         setTimeout(arguments.callee, 5000); 
 
        })(); 
 
      })(); 
 
     </script> 
 
\t </body> 
 
</html>

回答

0

我想你正在尋找的是jQuery的淡出和淡入功能。 http://api.jquery.com/fadeout/

在它說你使用jQuery的標籤,但是你的代碼大部分看起來不像jQuery般。

在你的旋轉功能,你可以添加類似:

$('a#linkID').fadeOut(300) 

還是要使它更普遍一點,你可以將元素傳遞給上旋轉功能和行爲。

function rotation(eleID) { 
    $(eleID).fadeOut(300) 
    if (i != l-1) { 
    i++ 
    } else { 
    i = 0; 
    } 
    f(e, urls[i]); 
    setTimeout(arguments.callee, 5000); 
    } 

我希望這有助於!

相關問題