// 照片路径为img/num.jpg num为从1开始的数字
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#pic{
750px;
height: 500px;
border: 1px solid #999;
margin: 100px auto;
position: relative;
}
#list li{
float: left;
list-style: none;
background: url(img/1.jpg);
125px;
height: 125px;
box-shadow: 0 0 1px #666;
}
#pic a{
text-decoration: none;
50px;
height: 50px;
position: absolute;
top: 50%;
margin-top: -25px;
background: #000;
opacity: .4;
text-align: center;
line-height:50px ;
font-size: 20px;
font-weight: 600;
color: #fff;
}
#pic a:hover{
opacity: 1;
}
#left{
left: 10px;
}
#right{
right: 10px;
}
</style>
</head>
<body>
<div id="pic">
<ul id="list">
</ul>
<a id="left" href="javascript:;"><</a>
<a id="right" href="javascript:;">></a>
</div>
<script type="text/javascript">
var oList = document.getElementById("list");
var oLeft = document.getElementById("left");
var oRight = document.getElementById("right");
var str = '';
for(var i=0;i<24;i++){
var x = i % 6 ;
var y = Math.floor(i / 6);
str+="<li style ='background-position:"+x*-125+"px " +y*-125+ "px' ></li>"
}
oList.innerHTML = str;
var oLi = document.getElementsByTagName('li');
oLi.num = 1;
oRight.onclick = function(){
oLi.num++;
if(oLi.num>24){
oLi.num = 1;
}
fn();
}
oLeft.onclick = function(){
oLi.num--;
if(oLi.num<1){
oLi.num = 24;
}
fn();
}
function fn(){
var arr = [];
for(var i=0; i<24;i++){
arr.push(i);
}
var timer = setInterval(function(){
var index = Math.floor(Math.random()*arr.length);
oLi[arr[index]].style.backgroundImage = "url(img/"+oLi.num+".jpg)";
arr.splice(index,1);
if(arr.length == 0){
clearInterval(timer);
}
},30)
}
</script>
</body>
</html>