UseStudio.CloudFront/controls/phone/banner_phone/banner_phone.js

//丘润成，叶延裕，傅昊
Namespace.register("U.Control.bp"); //浏览列表命名空间
U.Control.bp.U_BP_aaa = 1;
U.Control.bp.U_BP_nowWidth;
U.Control.bp.U_BP_nowHeight;
//第一个函数
U.Control.bp.Z = function () {
    var U_BP_kuan = $$("div", { "style": { "width": "100%", "height": "100%", "float": "left"} }, document.body);
    U.Control.bp.U_BP_y(U_BP_kuan);
    var U_BP_tpk = $("#U_BP_tpk")[0];
    U_BP_tpk.style.transform = "translateX(0px)";
    U.Control.bp.A();
    return U_BP_kuan;
}
//动态创建轮播图片
U.Control.bp.U_BP_y = function (U_BP_kuan) {
    var U_BP_a = $$("div", { "style": { "width": "400px", "height": "300px", "overflow": " hidden", "position": " absolute" }, "id": "U_BP_ck" }, U_BP_kuan);
    var U_BP_b = $$("ul", { "style": { "float": "left", "height": "300px", "width": " 1200px", " position": " absolute", "left": "0", "top": "0", "list-style-type": " none" }, "id": "U_BP_tpk" }, U_BP_a);
    var U_BP_c = $$("li", { "style": { "float": "left", "height": "300px", "width": " 400px", "list-style-type": " none", "background": "url(http://d.1473.cn/controls/phone/banner_phone/img/a.jpeg)", "background-size": "100% 100%"} }, U_BP_b);
    var U_BP_d = $$("li", { "style": { "float": "left", "height": "300px", "width": " 400px", "list-style-type": " none", "background": "url(http://d.1473.cn/controls/phone/banner_phone/img/b.jpg)", "background-size": "100% 100%"} }, U_BP_b);
    var U_BP_e = $$("li", { "style": { "float": "left", "height": "300px", "width": " 400px", "list-style-type": " none", "background": "url(http://d.1473.cn/controls/phone/banner_phone/img/c.jpg)", "background-size": "100% 100%"} }, U_BP_b);
    var U_BP_f = $$("li", { "style": { "float": "left", "height": "300px", "width": " 400px", "list-style-type": " none", "background": "url(http://d.1473.cn/controls/phone/banner_phone/img/d.jpg)", "background-size": "100% 100%"} }, U_BP_b);
    var U_BP_g = $$("li", { "style": { "float": "left", "height": "300px", "width": " 400px", "list-style-type": " none", "background": "url(http://d.1473.cn/controls/phone/banner_phone/img/e.jpeg)", "background-size": "100% 100%"} }, U_BP_b);
    var U_BP_h = $$("div", { "style": { "width": "100%", "height": "76PX", "position": " absolute", " z-index": " 2", "bottom": " 0", "left": " 0", " padding": " 0", "border-top": " 1px solid #444", "background-image": "url(http://d.1473.cn/controls/phone/banner_phone/img/beijinggg.png)", "background-size": "100% 100%" }, "id": "U_BP_Stop" }, U_BP_kuan);
    var U_BP_i = $$("div", { "style": { "z-index": "999", "width": "100px", "height": "76px", "color": "#FFF", "font-size": "2.5em", "text-align": "center", "line-height": "76px" }, "innerHTML": "1/2", "id": "U_BP_Stop1" }, U_BP_h);
    var U_BP_j = $$("div", { "style": { "width": "30%", "height": "76px", "margin-top": "-68px", "margin-left": "67%" }, "id": "U_BP_Stop2" }, U_BP_h);
    var U_BP_k = $$("div", { "style": { "width": "50px", "height": "50px", "margin-left": "12px", "float": "left", "background-image": "url(http://d.1473.cn/controls/phone/banner_phone/img/preview1.png)", "background-size": "100% 100%" }, "id": "U_BP_Sbutton0", "onclick": "U.Control.bp.B()" }, U_BP_j);
    var U_BP_l = $$("div", { "style": { "width": "50px", "height": "50px", "margin-left": "12px", "float": "left", "background-image": "url(http://d.1473.cn/controls/phone/banner_phone/img/preview2.png)", "background-size": "100% 100%" }, "id": "U_BP_Sbutton1" }, U_BP_j);
    var U_BP_m = $$("div", { "style": { "width": "50px", "height": "50px", "margin-left": "12px", "float": "left", "background-image": "url(http://d.1473.cn/controls/phone/banner_phone/img/preview3.png)", "background-size": "100% 100%" }, "id": "U_BP_Sbutton2" }, U_BP_j);
}
U.Control.bp.A = function () {
//定义touch需要用到的变量
    var U_BP_first_X,
    U_BP_first_Y,
    //记录初始的x坐标和y坐标
    U_BP_x,
    U_BP_y,
    U_BP_aboveX = 0;
    //记录上一次的X坐标
    var startXX;
    //获取当前的页面的宽度和高度
    U.Control.bp.U_BP_nowWidth = document.body.offsetWidth;
    U.Control.bp.U_BP_nowHeight = document.body.offsetHeight;
    var U_BP_tpk = $("#U_BP_tpk")[0];
    var U_BP_tpkt = $("#U_BP_tpk");
    var U_BP_ck = $("#U_BP_ck")[0];
    var U_BP_tpkc = U_BP_tpk.children.length;
    U_BP_ck.style.width = U.Control.bp.U_BP_nowWidth + "px";
    U_BP_ck.style.height = U.Control.bp.U_BP_nowHeight + "px";
    U_BP_tpk.style.width = U.Control.bp.U_BP_nowWidth * U_BP_tpkc + "px";
    U_BP_tpk.style.height = U.Control.bp.U_BP_nowHeight * U_BP_tpkc + "px";
    //获取translateX内容的正则表达式
    var execXX = /\.*translateX\((.*)px\)/i;
    //var execXX = \d{2};
    for (var i = 0; i < U_BP_tpk.children.length; i++) {
        U_BP_tpk.children[i].style.width = U.Control.bp.U_BP_nowWidth + "px";
        U_BP_tpk.children[i].style.height = U.Control.bp.U_BP_nowHeight + "px";
    }
    //手机touch事件
    U_BP_tpkt.bind("touchstart", function (e) {
    //手机开始滑动的触发的事件，记录初始坐标
        U_BP_tpk.style.transition = "";
        var touch = e.touches[0];
        U_BP_first_X = touch.pageX;
    }, false)
    U_BP_tpkt.bind("touchmove", function (e) {
    //滑动过程中改变图片的位置
        U.UF.EV.stopBubble();
        var touch = e.touches[0];
        U_BP_x = touch.pageX - U_BP_first_X;
        //U_BP_tpk.style.left = U_BP_aboveX + U_BP_x + "px";
        U_BP_tpk.style.transform = "translateX(" + (U_BP_aboveX + U_BP_x) + "px)";
        startXX = parseInt(execXX.exec(U_BP_tpk.style.transform)[1]);
    }, false)
    U_BP_tpkt.bind("touchend", function (e) {
    //循环判断当前banner的位置
        if (startXX > -U.Control.bp.U_BP_nowWidth / 2) {
            U_BP_tpk.style.cssText += "transition:0.5s all;"
            U_BP_tpk.style.transform = "translateX(0px)";
            startXX = parseInt(execXX.exec(U_BP_tpk.style.transform)[1]);
        }
        for (var i = 0; i < U_BP_tpkc - 2; i++) {
            if (startXX < -U.Control.bp.U_BP_nowWidth / 2 + i * -U.Control.bp.U_BP_nowWidth && startXX > (i + 1) * -U.Control.bp.U_BP_nowWidth + -U.Control.bp.U_BP_nowWidth / 2) {
                U_BP_tpk.style.cssText += "transition:0.5s all;"
                U_BP_tpk.style.transform = "translateX(" + ((i + 1) * -U.Control.bp.U_BP_nowWidth) + "px)";
                startXX = parseInt(execXX.exec(U_BP_tpk.style.transform)[1]);
            }
        }
        if (startXX < -U.Control.bp.U_BP_nowWidth * (U_BP_tpkc - 1) + U.Control.bp.U_BP_nowWidth / 2) {
            U_BP_tpk.style.cssText += "transition:0.5s all;"
            U_BP_tpk.style.transform = "translateX(" + (-U.Control.bp.U_BP_nowWidth * (U_BP_tpkc - 1)) + "px)";
            startXX = parseInt(execXX.exec(U_BP_tpk.style.transform)[1]);
        }
        U_BP_aboveX = parseInt(startXX);
    }, false);
}
//自动轮播函数
U.Control.bp.B = function () {
    //判断定时器是否存在，如果存在则清除定时器
    if (U.Control.bp.U_BP_aaa == 2) {
        U.Control.bp.U_BP_aaa = 1;
        clearInterval(timer);
        return;
    }
    //如果定时器不存在 使图片轮播
    if (U.Control.bp.U_BP_aaa == 1) {
        U.Control.bp.U_BP_aaa = 2;
        var U_BP_tpk = $("#U_BP_tpk")[0];
        var U_BP_U_BP_nowWidth = document.body.offsetWidth;
        //获取translateX参数的正则表达式
        var U_BP_execXX = /\.*translateX\((.*)px\)/i;
        var U_BP_startXX;
        U_BP_startXX = parseInt(U_BP_execXX.exec(U_BP_tpk.style.transform)[1]);
        //获取当前的translateX
        var U_BP_oli = U_BP_tpk.getElementsByTagName('li');
        U_BP_tpk.style.width = U_BP_oli[0].offsetWidth * U_BP_oli.length + 'px';
        U_BP_tpk.style.transition = "0.5s all";
        window.timer = setInterval(function () {
        //用setInterval使图片不断轮播
            U_BP_tpk.style.transform = "translateX(" + (U_BP_startXX - U_BP_U_BP_nowWidth) + "px)";
            U_BP_startXX = parseInt(U_BP_execXX.exec(U_BP_tpk.style.transform)[1]);
            if (U_BP_startXX <= U.Control.bp.U_BP_nowWidth * -U_BP_tpk.children.length) {
                U_BP_tpk.style.transform = "translateX(0px)";
                U_BP_startXX = parseInt(U_BP_execXX.exec(U_BP_tpk.style.transform)[1]);
                //获取当前的translateX
            }
        }, 1500)
        return;
    }
}