您当前的位置: <!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
body{margin:0;padding:0;}
#shider{
width:500px;
height:375px;
margin:0 auto;
position:relative;
}
ul{
list-style:none;
margin:0;padding:0;
}
img{width:500px;height:375px;margin:0;padding:0;}
#box{
width:500px;
height:375px;
overflow:hidden;
}
#show{
width:500px;
height:1500x;
overflow:hidden;
}
#number{position:absolute;bottom:20px;right:10px;}
#number li{
float:left;
width:20px;
height:20px;
text-align:center;
line-height:20px;
background-color:#fff;
border:solid 1px red;
margin-left:5px;
}
#number li.on{ //这里设置数字列表鼠标经过时候的样式
color:#fff;
line-height;20px;
width:20px;
height:20px;
font-size:14px;
border:none;
background:#2b5000;
font-weight:bold;
cursor:pointer;
text-align: center;
border:1px red solid;
}
</style>
<script src="jquery-2.0.3.min.js"></script> //必须导入jq插件
<script type="text/javascript">
$(document).ready(function(){
var x = 0;
var len = $("#number li").length; //项目列表的个数，和图片的个数一样
$("#number li").mouseover(function(){
var x=$(this).index(); //获得鼠标经过时候的索引
$(this).addClass('on');
showImg(x); //把对应的索引传递给showImg函数
})
function adTimer(){
x+=1; //这里传递的是索引，而不是图片的宽度，必须注意
showImg(x);
if(x>=len){x=0};
}
var timer = setInterval(adTimer,3000) //定时器
})
function showImg(x){ //图片滚动执行函数
$("#show").animate({"margin-top":-375*x},300);
$("#number li").removeClass("on").eq(x).addClass('on');
}
// 整个过程以传递索引为一条主线
</script>
</head>
<body>
<div id="shider">
<div id="box">
<div id="show">
<img src="images/00033.jpg"><img src="images/00035.jpg"><img src="images/00035.jpg"><img src="images/00036.jpg">
</div>
</div>
<ul id="number">
<li>1</li><li>2</li><li>3</li><li>4</li>
</ul>
</div>
</body>
</html>