<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>示範html</title>
</head>
<style type="text/css">
*{ margin:0; padding:0}
div{ width:100%; overflow:hidden; position:relative; height:420px; margin:100px auto}
body{ border:0}
ul{ list-style:none; position:relative; height:420px}
ul li{ height:420px; position:absolute; width:100%}
.a{ background:url(http://i3.tietuku.com/f79f518e8b83efcf.jpg) no-repeat top center}
.b{ background:url(http://i3.tietuku.com/6256e51594ca3fc0.jpg) no-repeat top center}
.c{ background:url(http://i3.tietuku.com/dbd7185389a7085b.jpg) no-repeat top center}
.d{ background:url(http://i3.tietuku.com/814379ae6a1e0228.jpg) no-repeat top center}
.e{ background:url(http://i3.tietuku.com/7bc009d2c4c8c79d.jpg) no-repeat top center}
ol{ list-style:none; background:#000; height:12px; position:absolute; z-index:2; opacity:0.3; border-radius:10px; width:110px; padding-left:10px; left:50%; margin-left:-55px; bottom:20px}
ol li{ width:12px; height:12px; background:#fff; border-radius:50%; float:left; opacity:0.4; margin-right:10px; cursor:pointer}
.visted{ opacity:1}
</style>
<script type="text/javascript" src="http://res.zhenimg.com/res/zhenpin/V3/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){
var zindex=2;
var index = 0;
var t;
function motion(){
zindex++;
index++;
if(index == 5){
index=0;
$("ul li").fadeOut(1000).parent().children("li").eq(index).fadeIn(1000);
visted(index);
}else{
$("ul li").fadeOut(1000).parent().children("li").eq(index).fadeIn(1000);
visted(index);
}
t=window.setTimeout(motion,4000);
}
function start(){
t=window.setTimeout(motion,4000);
}
function stop(){
window.clearTimeout(t);
}
$("div").mouseover(function(){
stop();
}).mouseout(function(){
start();
});
function visted(index){
$("ol li").eq(index).addClass("visted");
$("ol li").eq(index).siblings().removeClass("visted");
}
$("ol li").mouseover(function(){
var index1 = $(this).index();
index = index1;
$("ul li").fadeOut(1000).parent().children("li").eq(index).fadeIn(1000);
visted(index1);
});
start();
});
</script>
<body>
<div>
<ul>
<li class="a" style="z-index:1"></li>
<li class="b"></li>
<li class="c"></li>
<li class="d"></li>
<li class="e"></li>
</ul>
<ol>
<li class="visted"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
</body>
</html>
![nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)