<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<style>
#shider{
width:463px;
height:300px;
margin:0 auto;
position:relative;
}
ul{
list-style:none;
}
#box{
width:463px;
height:300px;
overflow:hidden;
}
#show{
width:463px;
height:1210px;
overflow:hidden;
}
#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;
}
</style>
<script src="jquery-1.11.0.min.js"></script>
<script type="text/javascript">
/*$(function()
{
$("#number li").mouseover(function()
{
var x = $(this).index();
$("#show").stop().animate({"margin-top":-300*x},300);//滚动距离有兼容性问题。。自己调
});
})*/
$(document).ready(function(){
$("#number li").mouseover(function(){
var x=$(this).index();
$("#show").stop().animate({"margin-top":-300*x},300);
})
})
</script>
</head>
<body>
<div id="shider">
<div id="box">
<div id="show">
<img src="image/1.jpg"><img src="image/2.jpg"><img src="image/3.jpg"><img src="image/4.jpg">
</div>
</div>
<ul id="number">
<li>1</li><li>2</li><li>3</li><li>4</li>
</ul>
</div>
</body>
</html>
JQ简单鼠标经过li滚动图片,布布扣,bubuko.com
JQ简单鼠标经过li滚动图片
原文：http://blog.csdn.net/xiaomogg/article/details/23157689
