/*H5 拖拽上传图片 李泉*/ Namespace.register("U.Control.ImL"); //注册命名空间 U.Control.ImL.scroe= 0; U.Control.ImL.screen = 0; U.Control.ImL.buer; U.Control.ImL.time; U.Control.ImL.time2; U.Control.ImL.loadbest = function () { /*初始化函数 返回最大的div 并且给元素附事件*/ var g = $$("div", {}, document.body); var best = $$("div", { "id": "bests" }, g); var banner = $$("div", { "id": "banner" }, best); var box = $$("ul", { "id": "box", "width": "300%", "position": "relative", "left": "0%" }, banner); var li1 = $$("li", { "id": "img0" }, box); var file1 = $$("input", { "id": "file1", "type": "file" }, li1); var li2 = $$("li", { "id": "img1" }, box); var file2 = $$("input", { "id": "file2", "type": "file" }, li2); var li3 = $$("li", { "id": "img2" }, box); var file2 = $$("input", { "id": "file3", "type": "file" }, li3); var leftbox = $$("div", { "id": "leftbox" }, banner); var left = $$("div", { "id": "left" }, leftbox); var right = $$("div", { "id": "right" }, leftbox); var page = $$("ol", { "id": "page" }, banner); var pageli1 = $$("li", { "id": "0" }, page); var pageli2 = $$("li", { "id": "1" }, page); var pageli3 = $$("li", { "id": "2" }, page); U.Control.ImL.dei(); return best; } /*window.onload = function () { U.Control.ImL.loadbest(); } */ U.Control.ImL.dei = function () { var box = $("#box li"); for (var i = 0; i < box.length; i++) { //ol 对应 图片 box[i].id = "img" + i; box[i].style.opacity = 1; box[i].style.zIndex = 2; box[i].childNodes[0].addEventListener("change", function () { var reader = new FileReader(); reader.readAsDataURL(this.files[0]); var g = this.parentNode.id.replace(/[^0-9]+/g, ''); reader.onload = function (e) { // $("#test")[0].src = e.target.result; $("#box li")[g].style.backgroundImage = 'url(' + e.target.result + ')'; } }); } U.Control.ImL.time = setTimeout("U.Control.ImL.start()", 3000); //开始计时 U.Control.ImL.scroe = 0; U.Control.ImL.restart(); $("#box")[0].style.left = -0 * 100 + "%"; $("#page li")[0].style.cssText = "background-color:skyblue;"; var a = $("#page li"); for (var i = 0; i < a.length; i++) { a[i].onclick = function () { U.Control.ImL.empty(); var img = $("#box")[0]; var imgLeft = parseInt(img.style.left); U.Control.ImL.scroe = parseInt(this.id); if (this.id == 0) { U.Control.ImL.cl(); U.Control.ImL.restart(); img.style.left = -0 * 100 + "%"; $("#page li")[0].style.cssText = "background-color:skyblue;"; } if (this.id == 1) { U.Control.ImL.cl(); U.Control.ImL.restart(); img.style.left = -1 * 100 + "%"; $("#page li")[1].style.cssText = "background-color:skyblue;"; } if (this.id == 2) { U.Control.ImL.cl(); U.Control.ImL.restart(); img.style.left = -2 * 100 + "%"; $("#page li")[2].style.cssText = "background-color:skyblue;"; } } } $("#right")[0].onclick = function () { //向右切换图片 if (U.Control.ImL.buer == true) return; U.Control.ImL.restart(); U.Control.ImL.empty(); var img = $("#box")[0]; if (U.Control.ImL.scroe == 0) { $("#page li")[1].style.cssText = "background-color:skyblue;"; U.Control.ImL.intoright((-0 - 1) * 100); U.Control.ImL.scroe += 1; return; } if (U.Control.ImL.scroe == 1) { $("#page li")[2].style.cssText = "background-color:skyblue;"; U.Control.ImL.intoright((-1 - 1) * 100); U.Control.ImL.scroe += 1; return; } if (U.Control.ImL.scroe == 2) { img.style.left = 0 + "%"; $("#page li")[0].style.cssText = "background-color:skyblue;"; U.Control.ImL.scroe += 1; return; } if (U.Control.ImL.scroe >= 3) { U.Control.ImL.scroe = 0; $("#page li")[1].style.cssText = "background-color:skyblue;"; U.Control.ImL.intoright((-0 - 1) * 100); U.Control.ImL.scroe += 1; } } $("#left")[0].onclick = function () {//向左切换图片 if (U.Control.ImL.buer == true) return; U.Control.ImL.restart(); U.Control.ImL.empty(); var img = $("#box")[0]; if (U.Control.ImL.scroe == 0) { img.style.left = -200 + "%"; $("#page li")[2].style.cssText = "background-color:skyblue;"; U.Control.ImL.scroe = 2; return; } if (U.Control.ImL.scroe == 1) { $("#page li")[0].style.cssText = "background-color:skyblue;"; U.Control.ImL.intoleft(0 * 100); U.Control.ImL.scroe -= 1; return; } if (U.Control.ImL.scroe == 2) { $("#page li")[1].style.cssText = "background-color:skyblue;"; U.Control.ImL.intoleft(-1 * 100); U.Control.ImL.scroe -= 1; return; } } } U.Control.ImL.restart = function () { //重新计时 clearTimeout(U.Control.ImL.time); U.Control.ImL.time = setTimeout("U.Control.ImL.start()", 3000); } U.Control.ImL.cl = function () { //判断是否正在移动 if (U.Control.ImL.buer = true) { var a = $("#box li"); for (var i = 0; i < a.length; i++) { a[i].style.opacity = 1; } clearTimeout(U.Control.ImL.time2); U.Control.ImL.buer = false; } } U.Control.ImL.intoright = function (w) { // 右移动画 U.Control.ImL.buer = true; var dei; var pl = $("#page li"); for(var i = 0;i= 3) { U.Control.ImL.scroe = 0; img.style.left = 0 + "%"; return; }*/ else { U.Control.ImL.scroe = 0; U.Control.ImL.empty(); img.style.left = 0 + "%"; $("#page li")[0].style.cssText = "background-color:skyblue;"; } U.Control.ImL.time = setTimeout("U.Control.ImL.start()", 3000); } U.Control.ImL.empty = function () { //清空 ol background-color var a = $("#page li"); for (var i = 0; i < a.length; i++) { a[i].style.cssText = "background-color:white;"; } }