带数字框上下轮播图
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style >
.wrap-top-right{width: 205px;height: 380px;}
.right-photo{overflow: hidden;height: 380px;position:relative}
.photo{height: 1900px;position: absolute;overflow: hidden;padding-left: 0px;margin-top: 0px;} ul自带边距
.photo li{height: 380px}
.photo li a img{width: 205px;height: 380px;}
.number{position: absolute; list-style: none;padding-left: 50px; bottom: 19px;overflow: hidden}
.hidden{display: none;}
.number li{border:solid 1px #ff679a;width: 15px;float: left;margin-left: 4px;text-align: center; background-color: #ffffff}
.number li.on{background-color:#ff679a;color: #ffffff }
</style>
</head>
<body>
<div class="wrap-top-right">
<div class="right-photo">
<ul class="photo">
<li ><a href=""><img src="img/app.png" ></a></li>
<li ><a href=""><img src="img/index.jpg"></a></li>
<li ><a href=""><img src="img/app.png" ></a></li>
<li ><a href=""><img src="img/index.jpg" ></a></li>
<li><a href=""><img src="img/app.png"></a></li>
</ul>
<ul class="number">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</div>
</body>
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>
<script>
$(function(){
var len = $(".number > li").length;
var index = 0; //图片序号
var sliderHeight=380;
var adTimer;
$(".number li").mouseover(function() {
index = $(".number li").index(this); //获取鼠标悬浮 li 的index
showImg(index);
}).eq(0).mouseover();
//滑入停止动画，滑出开始动画.
$('.wrap-top-right').hover(function() {
clearInterval(adTimer);
$(".number").removeClass('hidden');
}, function() {
$(".number").addClass('hidden');
adTimer = setInterval(function() {
if (index == len) { //最后一张图片之后，转到第一张
index = 0;
}
showImg(index)
index++;
}, 2000);
}).trigger("mouseleave");
function showImg(index) {
$('.photo').stop().animate({'top':-index*sliderHeight+'px'},300);
$(".number li").removeClass("on").eq(index).addClass("on");
}
});
</script>
</html>
