作业：马赛克式图片轮转

来源：互联网发布：沈阳盘古网络编辑：程序博客网时间：2024/04/30 02:42

需求：切换图片，有两个按钮，点击会切换图片，图片被分成24个小方格，切换的时候随机挑出小方格，切换图片，直到所有小方格切换完成。

思路：定义一个ul，里面有24个li，并获取包含所有li的数组。每点击一次按钮，启动定时器，每50ms生成一个0~24之间的随机数，将数组中下标为随机数的li挑出来，改变背景。

html+css(添加了一些动画效果)：

<!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 {            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>    </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);            */

最终效果

最终效果
**

0 0