[ JQUERY ] – 網址輪播


<html>
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
var i=0;
var k=0;
function url_slider() {
//$('#main').fadeOut(); //A 換頁效果 淡出
$('#main').animate({height:'toggle'});//B 換頁效果 往上
$('#mask').animate({opacity:0.1});//B 換頁效果 遮罩透明度
url = new Array("http://weblife.tw","http://webteach.tw","http://od-design.net"); //輪播網址
k = i % url.length;
$('#show').attr("src",url[k]);//載入新的網址
$('#main').animate({height:'toggle'},1000);//B 換頁效果 往下
$('#mask').animate({opacity:0});//B 換頁效果 遮罩透明度
//$('#main').fadeIn(1500); //A 換頁效果 淡入
i++;
setTimeout("url_slider()",6000);//每6秒輪播一次
}
</script>
<style type="text/css">
body { margin: 0;}
#main { position:relative; }
#mask {
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
background-color:#000;
opacity:0.4;
filter:Alpha(opacity=0.4);
}
</style>
</head>
<body onload="url_slider()" oncontextmenu="window.event.returnValue=false;" ><!-- 禁用滑鼠右鍵選單 -->
<div id="main">
<iframe id="show" style="border:0; width:100%; height:100%; overflow:hidden" scrolling="no"></iframe>
<div id="mask"></div><!-- 遮罩 主要功能是不讓使用者使用滑鼠 -->
</div>
</body>
</html>
!去下營經續永站本助幫能就下一點輕輕,話的您到助幫有章文的我果如 如果我的文章有幫助到您的話,輕輕點一下就能幫助本站永續經營下去!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。