<!doctype html>
<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 {
/* -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; */
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" >
<!-- <input id="prev" type="button" value = "prev">
<input id="next" type="button" value ="next"> -->
</div>
<ul id = 'exam'></ul>
<!-- <div class="bg"></div> -->
<script>
var prevBtn = document.getElementById('prev');
var nextBtn = document.getElementById('next');
var box = document.getElementById('exam');
var oUl = document.createElement('ul');
//循环生成li
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';
box.appendChild(oLi);
};
//----------循环修改LI背景/样式--------------------
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);';
};*/
//----------------------------------
/*
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';
};*/
//-------------------------------------
var cNum = 1;
var timer1 = null;
nextBtn.onclick = function () {
//判断图片下标，如果到达最后一个图片则跳转到第一张
if (cNum == 24) {
cNum=1;
}
//--------------------------
cNum++;
//进行循环，向数组中添加24个下标，从数组中挑数，每有一个数被挑出，则修改此下标的li的背景，然后从数组中删除此下标，然后又进行计时器，此时生成的随机数将从剩下的数组长度中挑出随机数。
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)';
liBox[ arr[lran] ].style['box-shadow'] = 'none';
arr.splice(lran,1);
console.log(arr);
//当数组中数字全部挑出时，清除计时器
if (arr.length==0) {
clearInterval(timer);
};
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);
*/
}
prevBtn.onclick = function () {
if (cNum == 1) {
cNum = 24;
}
cNum--;
/*var timer = setInterval(function(){
var ran = Math.random()*24;
var lran = Math.floor(ran);
liBox[lran].style['background-image'] = 'url(img/'+cNum+'.jpg)';
// clearInterval(timer);
},20)
setInterval(function () {
clearInterval(timer);
},4000);*/
tab();//调用封装函数
}
//封装-------------------------------
function tab () {
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)';
liBox[ arr[lran] ].style['box-shadow'] = 'none';
arr.splice(lran,1);
console.log(arr);
//当数组中数字全部挑出时，清除计时器
if (arr.length==0) {
clearInterval(timer);
};
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)
}
</script>
</body>
</html>
一款顺滑的马赛克式图片切换项目
需积分: 9 187 浏览量
2016-01-18
16:17:48
上传
评论
收藏 1003KB RAR 举报
12121.rar （28个子文件） 
12121 img 
8.jpg 43KB 15.jpg 46KB 14.jpg 39KB 2.jpg 43KB 1.jpg 39KB 6.jpg 49KB 3.jpg 44KB 5.jpg 42KB 19.jpg 55KB
right.png 1KB 21.jpg 34KB 11.jpg 57KB paper.jpg 204KB 4.jpg 38KB 23.jpg 61KB 10.jpg 45KB 22.jpg 34KB 24.jpg 49KB 17.jpg 34KB 18.jpg 35KB 13.jpg 63KB 16.jpg 41KB 12.jpg 47KB 9.jpg 41KB 20.jpg 42KB 7.jpg 44KB left.png 1KB
change_img.html 6KB资源评论
