<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#ul1{
position: relative;
800px;
height: 450px;
margin: 50px auto 0;
list-style: none;
}
#ul1 li{
position: absolute;
left: 0;
top: 0;
100px;
height: 90px;
}
</style>
</head>
<body>
<!--800*450 图片高800宽450 将他分成 8行 5列 每个小块是100*90
100*90
8 * 5 共40个li-->
<ul id="ul1">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
<script src="js/jquery-2.2.1.min.js"></script>
<script>
var page = 1; //page为1的时候 是第一张图片 page为2的时候是第二张图片 所以改变page就可以实现切换的效果 再给page判断临界值
create(page);//程序执行的时 传入第一张
//用定时器控制page的改变 没3秒钟调用一次定时器 执行一次page++ 判断临界值
var time = setInterval(function(){
page++;
if(page > 5)
{
page = 1;
}
//找到每个li hide隐藏, page=2就是第二张图片 然后在传入 实现第一张每个li隐藏 第二张每个li显示
$("ul >li").hide(500,function(){
create(page);
$(this).show(500); //show显示
})
},3000)
function create(page){
//each每次执行传递进来的函数时，函数中的this关键字都指向一个不同的DOM元素
$("ul>li").each(function(){
var index = $(this).index();
var oLeft = (index%8)*(-100); //每行8个li 每个li定位的时候是正数所以下面 加了个-负号变成正数 ，每个背景图定位是负数
var oTop = (Math.floor(index/8))*(-90); //除以8就是到了第二列，没有除进还在第一行top值没有增加 li的高为90
//背景图定位 每个li定位 背景图大小
$(this).css({"background":"url(img/"+page+".jpg) "+oLeft+"px "+oTop+"px","left":(-oLeft),"top":(-oTop),"background-size":"800px 450px"});
})
}
</script>
</html>