UseStudio.CloudFront/controls/pc/Imagelist/Imagelist.js

/*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<pl.length;i++){
            if(pl[i].style.backgroundColor=='skyblue'){
                dei = pl[i].id-1;
            }
        }
        var pageL = $("#page li");
        var img = $("#box")[0];
        if (w != undefined) {
            U.Control.ImL.screen = w;
        }
        var imgLeft = parseInt(img.style.left);
        if (imgLeft == U.Control.ImL.screen) {
            U.Control.ImL.screen = 0;
            U.Control.ImL.buer = false;
            $("#box li")[dei].style.opacity=1;
            return;
        }
        img.style.left = imgLeft - 1 + "%";

        $("#box li")[dei].style.opacity-=0.015;
        $("#box li")[dei].style.zIndex=0;
        U.Control.ImL.time2 = setTimeout("U.Control.ImL.intoright()", 20);

    }

    U.Control.ImL.intoleft = function (w) { //坐移动画
        U.Control.ImL.buer = true;
          var dei;
        var pl = $("#page li");
        for(var i = 0;i<pl.length;i++){
            if(pl[i].style.backgroundColor=='skyblue'){
                dei = parseInt(pl[i].id)+1;
            }
        }
        var img = $("#box")[0];
        if (w != undefined) {
            U.Control.ImL.screen = w;
        }
        var imgLeft = parseInt(img.style.left);
        if (imgLeft == U.Control.ImL.screen) {
            U.Control.ImL.screen = 0;
            U.Control.ImL.buer = false;
            $("#box li")[dei].style.opacity=1;
            return;
        }
        img.style.left = imgLeft + 1 + "%";
        $("#box li")[dei].style.opacity-=0.015;
        U.Control.ImL.time2=setTimeout("U.Control.ImL.intoleft()", 20);
    }


    U.Control.ImL.start = function () { //开始计时
        document.getElementById("file1").value;
        U.Control.ImL.buer = true;
        var img = $("#box")[0];
        // img.style.Left="-32+"%";"
        if (U.Control.ImL.scroe != 2) {

            U.Control.ImL.empty();
            if (U.Control.ImL.scroe == 0) {
                $("#page li")[1].style.cssText = "background-color:skyblue;";
            }
            if (U.Control.ImL.scroe == 1) {
                $("#page li")[2].style.cssText = "background-color:skyblue;";
            }
            if (U.Control.ImL.scroe == 2) {
                $("#page li")[0].style.cssText = "background-color:skyblue;";
            }
            U.Control.ImL.scroe += 1;
            var imgLeft = parseInt(img.style.left);
            U.Control.ImL.intoright(imgLeft - 100);
        }
        /*   if (U.Control.ImL.scroe >= 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;";
        }
    }