<!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>无标题文档</title>
<script type="text/jscript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/jscript">
$(document).ready(function(e) {
var in_out_time = 800 //渐显时间
var scroll_Interval_time = 2000 //滚动间隔时间
var scroll_time = 1000 //滚动动画时间
addli()
function addli(){
$("#scroll_List").css("top",0);
$("#scroll_List li:last").clone().prependTo("#scroll_List");
$("#scroll_List li:first").css("opacity",0);
$("#scroll_List li:first").animate({opacity:1},in_out_time);
setTimeout(delLi_last,scroll_Interval_time)
}
function delLi_last(){
$("#scroll_List li:last").detach();
$("#scroll_List").animate({top:100},scroll_time,addli)
}
});
</script>
<style>
*{
margin:0px;
padding:0px;
list-style:none;
}
.centerBox{
left:50%;
width:162px;
margin-left:-151px;
top:10%;
height:502px;
margin-top:0px;
position:absolute;
}
.main{
width:160px;
height:500px;
float:left;
border:1px solid #ccc;
}
.main strong{
width:150px;
height:495px;
float:left;
overflow:hidden;
margin:5px 5px 0px 5px;
display:inline;
position:relative;
}
.main strong ul{
width:150px;
position:absolute;
}
.main strong ul li{
width:150px;
height:160px;
line-height:100px;
text-align:center;
color:#FFF;
font-family:"simhei";
font-size:20px;
margin-bottom:5px;
}
.main strong ul li img{ border:0px;}
</style>
</head>
<body>
<div class="centerBox">
<div class="main">
<strong>
<ul id="scroll_List">
<li ><a href="http://www.chaonanwo.com/note/131/g/103" target="_blank"><img src="http://www.chaonanwo.com/public/upload/share/000/000/001/31/8ba706159850b27253b41814f856de85nHK4hH_150x160.jpg" width="150" height="160" /></a></li>
<li ><a href="http://www.chaonanwo.com/note/126/g/98" target="_blank"><img src="http://www.chaonanwo.com/public/upload/share/000/000/001/26/b429231ef938665bde49ece84a6ed7ccwXXX4q_150x160.jpg" width="150" height="160" /></a></li>
<li ><a href="http://www.chaonanwo.com/note/100/g/72" target="_blank"><img src="http://www.chaonanwo.com/public/upload/share/000/000/001/00/ba3fc00bf803392c3ee75f148190dc28TmPzpD_150x160.jpg" width="150" height="160" /></a></li>
<li ><a href="http://www.chaonanwo.com/note/25/g/18" target="_blank"><img src="http://www.chaonanwo.com/public/upload/share/000/000/000/25/baeaea83b04207e353aa58fa08f0d1b2Puvp3e_150x160.jpg" width="150" height="160" /></a></li>
</ul>
</strong>
</div>
</div>
</body>
</html>