<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/common.css"/> <link rel="stylesheet" href="css/index.css"/> <script src="js/common.js"></script> </head> <body> <div class="pictures" id="pic"> <ul> <li><a href="javascript:void(0);"><img src="images/33.jpg" alt=""/></a></li> <li><a href="javascript:void(0);"><img src="images/22.jpg" alt=""/></a></li> <li><a href="javascript:void(0);"><img src="images/11.jpg" alt=""/></a></li> <li><a href="javascript:void(0);"><img src="images/55.jpg" alt=""/></a></li> <li><a href="javascript:void(0);"><img src="images/44.jpg" alt=""/></a></li> <li><a href="javascript:void(0);"><img src="images/33.jpg" alt=""/></a></li> <li><a href="javascript:void(0);"><img src="images/22.jpg" alt=""/></a></li> <li><a href="javascript:void(0);"><img src="images/11.jpg" alt=""/></a></li> <li><a href="javascript:void(0);"><img src="images/55.jpg" alt=""/></a></li> <li><a href="javascript:void(0);"><img src="images/44.jpg" alt=""/></a></li> </ul> <ol> <li><a href="javascript:void(0);"><img src="images/1.jpg" alt=""/></a></li> <li><a href="javascript:void(0);"><img src="images/2.jpg" alt=""/></a></li> <li><a href="javascript:void(0);"><img src="images/3.jpg" alt=""/></a></li> <li><a href="javascript:void(0);"><img src="images/4.jpg" alt=""/></a></li> <li><a href="javascript:void(0);"><img src="images/5.jpg" alt=""/></a></li> <li><a href="javascript:void(0);"><img src="images/1.jpg" alt=""/></a></li> </ol> </div> </body> <script> //图片库开始 window.onload = function () { var config = [ { "top": 0, "left": 0, "opacity": 0.3, "zIndex": 1 },//0 { "top": 120, "left": 100, "opacity": 0.5, "zIndex": 2 },//1 { //"width": 200, "top": 240, "left": 200, "opacity": 1, "zIndex": 3 },//2 { //"width": 150, "top": 320, "left": 100, "opacity": 0.5, "zIndex": 2 },//3 { //"width": 100, "top": 407, "left": 0, "opacity": 0.3, "zIndex": 1 },//4 { //"height":100, //"width": 100, "top": 407, "left": -200, "opacity": 0.3, "zIndex": 1 },//5 { //"width": 150, "top": 320, "left": -300, "opacity": 0.5, "zIndex": 2 },//6 { //"width": 200, "top": 240, "left": -400, "opacity": 1, "zIndex": 3 },//7 { //"width": 150, "top": 120, "left": -300, "opacity": 0.5, "zIndex": 2 },//8 { //"width": 100, "top": 0, "left": -200, "opacity": 0.3, "zIndex": 1 },//9 ]; var pictures = document.getElementById("pic"); var ul = pictures.children[0]; var ulLis = ul.children; var ol = pictures.children[1]; var olLis = ol.children; function assign() { for (var i = 0; i < ulLis.length; i++) { animate(ulLis[i], config[i]); flag = true; } } assign(); var imgWidth = olLis[0].offsetWidth; var index = 0; var timer1 = null; var timer2 = null; timer1 = setInterval(function () { config.push(config.shift()); //indexNum++; //console.log(indexNum); for (var i = 0; i < ulLis.length; i++) { animate(ulLis[i], config[i]); } index++; if (index == 6) { ol.style.left = 0; index = 1; } }, 4000); timer2 = setInterval(function () { if (index < 6) { var target = -imgWidth * index; cutton(ol, target, 20); } }, 2000); for (var k = 0; k < ulLis.length; k++) { ulLis[k].onmouseover = function () { clearInterval(timer1); clearInterval(timer2); } ulLis[k].onmouseout = function () { timer1 = setInterval(function () { config.push(config.shift()); for (var i = 0; i < ulLis.length; i++) { animate(ulLis[i], config[i]); } index++; if (index == 6) { ol.style.left = 0; index = 1; } }, 4000); timer2 = setInterval(function () { if (index < 6) { var target = -imgWidth * index; cutton(ol, target, 20); } }, 2000); } } //var indexNum = 0; var flag = true; for (var num = 0; num < ulLis.length; num++) { ulLis[num].onclick = function () { if (flag) { flag = false; if (this.offsetTop == 0) { flag = true; config.push(config.shift()); config.push(config.shift()); assign(); index = index + 2; if (index == 6) { ol.style.left = 0; index = 1; } if (index < 6) { var target = -imgWidth * index; animate(ol, {left: target}); } console.log(index); }//1 if (this.offsetTop == 120) { flag = true; config.push(config.shift()); assign(); index = index + 1; if (index == 6) { ol.style.left = 0; index = 1; } if (index < 6) { var target = -imgWidth * index; animate(ol, {left: target}); } }//2 if (this.offsetTop == 320) { flag = true; //if (indexNum > 0) { config.unshift(config.pop()); assign(); index = index - 1; console.log(index); if (index < 0) { index = index + 5; } if (index == 6) { ol.style.left = 0; index = 1; } if (index < 6) { var target = -imgWidth * index; animate(ol, {left: target}); } //indexNum = indexNum - 1; // } }//4 if (this.offsetTop == 407) { flag = true; //if (indexNum > 1) { config.unshift(config.pop()); config.unshift(config.pop()); assign(); index = index - 2; if (index < 0) { index = index + 5; } if (index == 6) { ol.style.left = 0; index = 1; } if (index < 6) { var target = -imgWidth * index; animate(ol, {left: target}); } //indexNum = indexNum - 2; //} }//5 } } } } //图片库结束 </script> </html>