<!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>
<style type="text/css">
body, div, ul, ol, li, h1, h2, h3, h4, h5, h6, form, input, p, th, td {
padding: 0;
margin: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset, img {
border: 0;
}
ul,li{list-style:none;}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
font-size: 100%;
}
.content_right{float:left;}
.content_right .ad {
margin-bottom:10px;
width:573px;
height:257px;
overflow:hidden;
position:relative;
}
.content_right .slider,.content_right .num{
position:absolute;
}
.content_right .slider li{
list-style:none;
display:inline;
}
.content_right .slider img{
width:573px;
height:257px;
display:block;
}
.content_right .num{
right:5px;
bottom:5px;
}
.content_right .num li{
float: left;
color: #069;
text-align: center;
line-height: 16px;
width: 16px;
height: 16px;
font-family: Arial;
font-size: 12px;
cursor: pointer;
overflow: hidden;
margin: 3px 1px;
border: 1px solid #069;
background-color: #fff;
}
.content_right .num li.on{
color: #fff;
line-height: 16px;
width: 16px;
height: 16px;
font-size: 14px;
margin: 3px 1px;
border: 1px solid #069;
background-color: #069;
font-weight: bold;
}
</style>
<script language="javascript" src="jquery-1.7.1.min.js"></script>
<script language="javascript">
$(function(){
var len = $(".num > li").length;
var index = 0;
var adTimer;
$(".num li").mouseover(function(){
index = $(".num li").index(this);
showImg(index);
}).eq(0).mouseover();
//滑入 停止动画，滑出开始动画.
$('.ad').hover(function(){
clearInterval(adTimer);
},function(){
adTimer = setInterval(function(){
showImg(index)
index++;
if(index==len){
index=0;}
} , 2000);
}).trigger("mouseleave");
})
// 通过控制top ，来显示不同的幻灯片
function showImg(index){
var adHeight = $(".content_right .ad").height();
$(".slider").stop(true,false).animate({bottom : -adHeight*index},600);
$(".num li").removeClass("on")
.eq(index).addClass("on");
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<div class="content_right">
<div class="ad">
<ul class="slider">
<li><img src="buttom_0.jpg" alt="这是标题1"/></li>
<li><img src="buttom_1.jpg" align="haha"/></li>
<li><img src="buttom_2.jpg"/></li>
<li><img src="buttom_3.jpg"/></li>
</ul>
<ul class="num">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
</body>
</html>
