/www/wwwroot/cloud.lincq.cn/代码整理/原生js写的轮播图/js/poster.js/*************************
 *   在需要展示的位置添加 <div class="poster-area"></div>
 *   JS 代码：
 *      var FP = new forPoster(); // 创建对象
 *      FP.images = [html1, html2, ...]; // 添加页面HTML
 *      FP.autoplayTime = 0; // 自动播放时间，默认为0，不自动播放，单位毫秒
 *      FP.width = '360px'; // 宽带
 *      FP.height = '500px'; // 高度
 *      FP.transition = '360' // 动画时常，单位毫秒
 *      FP.css = 'position: fixed; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%)'; // 添加css
 *      FP.poster(); // 开始执行
************************/
function forPoster(this_) {
    this.container = this_.container ? this_.container : false;
    this.html = this_.html ? this_.html : '';
    this.autoplayTime = this_.autoplayTime ? this_.autoplayTime : 0;
    this.width = this_.width ? this_.width : '100%';
    this.height = this_.height ? this_.height : '500px';
    this.transition =  this_.transition ? this_.transition : '360';
    this.css = this_.css ? this_.css : '';
    this.buttons = (this_.buttons == false) ? false : true;
    var num = 0;
    var pll = null;
    var pnl = null;
    var pllf = null;
    var pllb = null;
    var PosterInterval = null;
    var forTime = 0, Transition = 0;
    try {
        var parea = document.createElement('div');
        parea.className = "poster-area";
        var container = document.body.querySelector(this.container);
        if(!this.html) {
            var poster_list = container.querySelectorAll(this.container+'>*'), container_html = [];
            for(var x = 0; x < poster_list.length; x++) {
                container_html[x] = poster_list[x].outerHTML;
            }
            this.html = container_html;
        }
        container.innerHTML = '';
        container.appendChild(parea);
    }catch (e) {}
    this.poster = function() {
        if(!this.container) {
            console.log('未设置 this.container 值，无法显示效果');
            return false;
        }
        parea.style.cssText = 'width: '+this.width+'; height: '+this.height+'; '+ this.css;
        if (this.html.length == 0) {
            console.log('请添加 this.html[] 卡片HTML内容');
            return false;
        }
        forTime = this.autoplayTime, Transition = this.transition;
        var cpal = document.createElement('div');
        cpal.className = 'poster-list';
        var cpalHTML = '';
        for(var i=0; i<this.html.length; i++) {
            cpalHTML += '<li><div class="poster-list-html">'+this.html[i]+'</div></li>';
        }
        cpal.innerHTML = cpalHTML;
        parea.appendChild(cpal);
        var pal = document.getElementsByClassName("poster-list")[0];
        pll = document.querySelectorAll('.poster-area .poster-list>li');
        var cpn = document.createElement('div');
        cpn.className = 'poster-number';
        pal.appendChild(cpn);
        var pn = document.querySelector('.poster-area .poster-number'), pnl_html = "";
        parea.ondragstart = () => {return false};
        for(var i=1; i<=pll.length; i++) {
            if(i==1) {
                pnl_html += '<li class="poster-number-li active">'+i+'</li>';
            }else{
                pnl_html += '<li class="poster-number-li">'+i+'</li>';
            }
        }
        pll[0].className = 'active';
        pn.innerHTML = pnl_html;
        pnl = document.querySelectorAll('.poster-area .poster-number>li');
        for(var i=0; i<pnl.length; i++) {
            pnl[i].index = i;
            pnl[i].onclick = function() {
                for(var j=0; j<pll.length; j++) {
                    pll[j].style.opacity = 0;
                    pll[j].style.zIndex = 0;
                    pll[j].style.transform = 'translateX(0%)';
                    pll[j].className = '';
                    pnl[j].className = 'poster-number-li';
                    pnl[j].style.transition = 'all '+Transition+'ms ease';
                }
                num = this.index;
                pllf = pll[this.index - 1 < 0 ? (pnl.length - 1) : this.index - 1];
                pllb = pll[this.index + 1 > (pnl.length - 1) ? 0 : this.index + 1];
                pll[this.index].style.transition = 'all '+Transition+'ms ease';
                pllf.style.transition = 'all '+Transition+'ms ease';
                pllb.style.transition = 'all '+Transition+'ms ease';
                pllf.style.transform = 'translateX(-100%)';
                pllb.style.transform = 'translateX(100%)';
                pllf.style.zIndex = 2;
                pllb.style.zIndex = 2;
                pll[this.index].style.zIndex = 1;
                pll[this.index].style.opacity = 1;
                pll[this.index].style.transform = 'translateX(0%)';
                pll[this.index].className = 'active';
                pnl[this.index].className = 'poster-number-li active';
            };
        }
        if(this.buttons) {
            var cLeft = document.createElement('div');
            cLeft.className = "poster-left";
            cLeft.onclick = () => {to_lr('left')};
            pal.appendChild(cLeft);
            var cRight = document.createElement('div');
            cRight.onclick = () => {to_lr('right')};
            cRight.className = "poster-right";
            pal.appendChild(cRight);
        }
        pllWidth = pll[0].clientWidth;
        parea.onmousedown = function(event) {
            if(PosterInterval != null) {
                window.clearInterval(PosterInterval);
            }
            pll[num].style.transition = 'all 0ms';
            pllf.style.transition = 'all 0ms';
            pllb.style.transition = 'all 0ms';
            var startT = new Date().getTime();
            var startX = event.pageX, moveLen=0, move=0, moveAdd=0, ascii=0, moveOpacity=0;
            document.onmousemove = function(bevent) {
                move = startX - bevent.pageX - moveLen;
                moveAdd += move;
                moveLen = startX - bevent.pageX;
                moveOpacity = (moveAdd / pllWidth).toFixed(6).replace('-', '');
                if(String((moveAdd / pllWidth).toFixed(1)).split('')[0]=='-') {
                    pllf.style.opacity = 1;
                    pll[num].style.opacity = 1 - moveOpacity;
                    pllf.style.transform = 'translateX(-' + String((1 - moveOpacity) * 100) + '%)';
                    ascii = 0;
                }else{
                    pllb.style.opacity = 1;
                    pll[num].style.opacity = 1 - moveOpacity;
                    pllb.style.transform = 'translateX(' + String((1 - moveOpacity) * 100) + '%)';
                    ascii = 1;
                }
            };
            document.onmouseup = function() {
                var yTime = new Date().getTime() - startT;
                if( (moveOpacity>0.3) || (yTime<=300 && moveOpacity>=0.1) ) {
                    if(ascii == 0) {
                        to_lr('left');
                    }else{
                        to_lr('right');
                    }
                }else{
                    to_lr();
                }
                try {
                    document.onmousemove = null;
                    document.onmouseup = null;
                }catch (e) {};
                fpTime(forTime);
            };
        };
        parea.ontouchstart = function(event) {
            if(PosterInterval != null) {
                window.clearInterval(PosterInterval);
            }
            pll[num].style.transition = 'all 0ms';
            pllf.style.transition = 'all 0ms';
            pllb.style.transition = 'all 0ms';
            var startT = new Date().getTime();
            var startX = event.touches[0].pageX, moveLen=0, move=0, moveAdd=0, ascii=0, moveOpacity=0;
            document.ontouchmove = function(bevent) {
                move = startX - bevent.touches[0].pageX - moveLen;
                moveAdd += move;
                moveLen = startX - bevent.touches[0].pageX;
                moveOpacity = (moveAdd / pllWidth).toFixed(6).replace('-', '');
                if(String((moveAdd / pllWidth).toFixed(1)).split('')[0]=='-') {
                    pllf.style.opacity = 1;
                    pll[num].style.opacity = 1 - moveOpacity;
                    pllf.style.transform = 'translateX(-' + String((1 - moveOpacity) * 100) + '%)';
                    ascii = 0;
                }else{
                    pllb.style.opacity = 1;
                    pll[num].style.opacity = 1 - moveOpacity;
                    pllb.style.transform = 'translateX(' + String((1 - moveOpacity) * 100) + '%)';
                    ascii = 1;
                }
            };
            document.ontouchend = function() {
                var yTime = new Date().getTime() - startT;
                if( (moveOpacity>0.5) || (yTime<=300 && moveOpacity>=0.1) ) {
                    if(ascii == 0) {
                        to_lr('left');
                    }else{
                        to_lr('right');
                    }
                }else{
                    to_lr();
                }
                try {
                    document.ontouchmove = null;
                    document.ontouchend = null;
                }catch (e) {}
                fpTime(forTime);
            };
        };
        to_lr();
        fpTime(forTime);
        return true;
    };
    const to_lr = this.to_lr = function(lr='') {
        if(lr=='left') {
            num--;
            num = num < 0 ? (pnl.length - 1) : num;
        }else if(lr=='right') {
            num++;
            num = num > (pnl.length - 1) ? 0 : num;
        }
        pnl[num].click();
    };
    function fpTime(t) {
        if(t != 0) {
            PosterInterval = self.setInterval(() => {
                to_lr('right');
            }, t);
        }
    }
}