作业：马赛克式图片轮转
需求：切换图片，有两个按钮，点击会切换图片，图片被分成24个小方格，切换的时候随机挑出小方格，切换图片，直到所有小方格切换完成。
思路：定义一个ul，里面有24个li，并获取包含所有li的数组。每点击一次按钮，启动定时器，每50ms生成一个0~24之间的随机数，将数组中下标为随机数的li挑出来，改变背景。
html+css(添加了一些动画效果)：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>马赛克图片切换title>
<style>
* {
padding: 0;
margin: 0;
}
ul {
margin:0 auto;
margin-top: 100px;
border: 1px solid #ccc;
list-style-type: none;
width: 750px;
height: 500px;
overflow: hidden;
}
#buttonBox {
position: absolute;
top: 10px;
margin-left: 400px;
}
body {
/*background-color: rgba(0,0,0,0.5);*/
background-image: url(img/paper.jpg);
}
.left {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 50px;
background-color: rgba(0,0,0,0.2);
cursor: pointer;
text-align: center;
line-height: 650px;
-webkit-transition:all 0.6s ease;
-moz-transition:all 0.6s ease;
-ms-transition:all 0.6s ease;
-o-transition:all 0.6s ease;
transition:all 0.6s ease;
}
.left:hover {
width: 70px;
background-color: rgba(0,0,0,0.5);
}
.right {
top: 0;
position: absolute;
right: 0;
height: 100%;
width: 50px;
background-color: rgba(0,0,0,0.2);
cursor: pointer;
line-height: 650px;
text-align: center;
-webkit-transition:all 0.6s ease;
-moz-transition:all 0.6s ease;
-ms-transition:all 0.6s ease;
-o-transition:all 0.6s ease;
transition:all 0.6s ease;
}
.right:hover {
width: 70px;
background-color: rgba(0,0,0,0.5);
}
li {
-webkit-transition:all 0.6s ease;
-moz-transition:all 0.6s ease;
-ms-transition:all 0.6s ease;
-o-transition:all 0.6s ease;
transition:all 0.6s ease;
box-shadow: 0 0 1px #ccc;
float:left;width:125px;height:125px;
background-image:url(img/1.jpg);
}
style>
head>
<body>
<div id="prev" class="left"><img src="img/left.png" alt="">div>
<div id="next" class="right"><img src="img/right.png" alt="">div>
<div id = "buttonBox" >
div>
<ul id = 'exam'>ul>
body>
html>ul里面的li用js生成，首先循环24次，每次都生成一个li，然后appendChild到ul中
循环生成li
var oUl = document.createElement('ul');
for (var i = 0; i < 24; i++) {
var oLi = document.createElement('li');
box.appendChild(oLi);
};li的样式用cssText添加
var liBox = document.getElementsByTagName('li');
// alert(liBox.length);
for (var i = 0; i < liBox.length; i++) {
liBox[i].index = i;
liBox[i].style.cssText = 'float:left;width:125px;height:125px;background:#ccc;';
liBox[i].style.cssText+='background-image:url(img/1.jpg);';
};修改li里面背景图片的Position
思路：每一行每一行的修改
for (var j = 0; j < 6; j++) {
var numX = 125*j;
liBox[j].style['background-position-x'] = -numX+'px';
};
for (var k = 6; k < 12; k++) {
var numX = 125*(k-6);
var numY = 125;
liBox[k].style['background-position-x'] = -numX+'px';
liBox[k].style['background-position-y'] = -numY+'px';
};
for (var q = 12; q < 18; q++) {
var numX = 125*q;
var numY = 250;
liBox[q].style['background-position-x'] = -numX+'px';
liBox[q].style['background-position-y'] = -numY+'px';
};
for (var p = 18; p < 24; p++) {
var numX = 125*p;
var numY = 375
liBox[p].style['background-position-x'] = -numX+'px';
liBox[p].style['background-position-y'] = -numY+'px';
};*/给按钮添加点击事件：
当按钮被点击时，先判断num的值，如果num到达最后一张，num=1；
然后启动定时器，每20ms生成一个随机数，然后将li数组中此下标的li的backgroundImage修改。因为事件很短，所以总会有一个时刻取到所以的li..
nextBtn.onclick = function () {
//判断图片下标，如果到达最后一个图片则跳转到第一张
if (cNum == 24) {
cNum=1;
}
//--------------------------
cNum++;
var timer = setInterval(function(){
var ran = Math.random()*arr.length;
var lran = Math.floor(ran);
liBox[ lran ].style['background-image'] = 'url(img/'+cNum+'.jpg)';
liBox[ lran ].style['box-shadow'] = 'none';
arr.splice(lran,1);
console.log(arr);
//当数组中数字全部挑出时，清除计时器
if (arr.length==0) {
clearInterval(timer);
};
},20)此时基本已经完成了，但是代码还是有很多缺点。
- 给li修改backgroundPosition时方法太傻逼
当按钮被点击，启动定时器后，我们对图片下标的取值，取值范围要逐渐减少，每一次的取值都要删除上一个被选出来的(即背景修改后的)li的下标，然后从其他数字里取值。这样我们就不用盼着计时器全都取出来了。之后我们还要清除计时器
解决方法：li的其他样式写在css中，当在ul中生成li时，直接就可以修改backgroundPosition。
修改position的思路是，x坐标是i%6的余数，y坐标是i/6的商（要取整）。
代码：
for (var i = 0; i < 24; i++) {
//通过取余实现对子元素图片背景位置的修改
var x = i%6;
var y = Math.floor( i / 6 );
var oLi = document.createElement('li');
oLi.style.backgroundPosition = x*-125 + 'px '+y*-125 +'px';//此时要注意，坐标的连接之间有空格，所以x后加的px为'px '而不是'px';
box.appendChild(oLi);
};这样对背景的修改就简单了
2.按钮点击时，启动定时器，我们定义一个数组，里面存0~24中的数，定时器每次启动都取出一个数组里面的随机数，当修改完样式后，从数组中删除此元素，数组长度减一，这样我们取出li的ul的长度就要是我们定义的数组的长度
代码
var arr = [];
for (var i = 0; i < 24; i++) {
arr[i] = i;
};
var timer = setInterval(function(){
var ran = Math.random()*arr.length;
var lran = Math.floor(ran);
liBox[ arr[lran] ].style['background-image'] = 'url(img/'+cNum+'.jpg)';
//修改li的阴影
liBox[ arr[lran] ].style['box-shadow'] = 'none';
arr.splice(lran,1);
console.log(arr);
//当数组中数字全部挑出时，清除计时器
if (arr.length==0) {
clearInterval(timer);
};
//经过一段时间后给所有li添加阴影
var timer2 = setInterval(function () {
for (var i = 0; i < liBox.length; i++) {
liBox[i].style['box-shadow'] = '0 0 1px #ccc';
};
clearInterval(timer2);
},1400)
// clearInterval(timer);
},20)
//初始方法，规定点击多长时间后清除计时器以避免累加
/*
setInterval(function () {
clearInterval(timer);
},3000);
*/最终效果
**