【实例截图】
【核心代码】
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>系统登录</title>
<link href="login.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$(".screenbg ul li").each(function() {
$(this).css("opacity", "0");
});
$(".screenbg ul li:first").css("opacity", "1");
var index = 0;
var t;
var li = $(".screenbg ul li");
var number = li.size();
function change(index) {
li.css("visibility", "visible");
li.eq(index).siblings().animate({
opacity: 0
}, 3000);
li.eq(index).animate({
opacity: 1
}, 3000);
}
function show() {
index = index 1;
if (index <= number - 1) {
change(index);
} else {
index = 0;
change(index);
}
}
t = setInterval(show, 8000);
//根据窗口宽度生成图片宽度
var width = $(window).width();
$(".screenbg ul img").css("width", width "px");
});
</script>
</head>
<body>
<div class="login-box">
<h1>XX后台登录</h1>
<form method="post" action="">
<div class="name">
<label>管理员账号：</label>
<input type="text" name="" id="" tabindex="1" autocomplete="off" />
</div>
<div class="password">
<label>密 码：</label>
<input type="password" name="" maxlength="16" id="" tabindex="2" />
</div>
<div class="code">
<label>验证码：</label>
<input type="text" name="" maxlength="4" id="code" tabindex="3" />
<div class="codeImg">
<!--<img src="{:U('index/Verify')}" style="border-radius:8px;" onclick="this.src=this.src '?rand=' Math.random()" />-->
</div>
</div>
<div class="remember">
<input type="checkbox" id="remember" tabindex="4">
<label>记住密码</label>
</div>
<div class="login">
<button type="submit" tabindex="5">登录</button>
</div>
</form>
</div>
<div class="bottom">©2014 Leting <a href="javascript:;" target="_blank">关于</a> <span>京ICP证030173号</span></div>
<div class="screenbg">
<ul>
<li>
<a href="javascript:;"><img src="images/0.jpg"></a>
</li>
<li>
<a href="javascript:;"><img src="images/1.jpg"></a>
</li>
<li>
<a href="javascript:;"><img src="images/2.jpg"></a>
</li>
</ul>
</div>
</body>
</html>
