2024onlinefontedteach/main.js

const youyou_move_ele = document.getElementById('youyou_move');

let n = 6,current_youyou = 0,current_onload_youyou = 0;
let youyou_pic_src = new Array;
let youyou_onload_ele = new Array,youyou_onload_inner_ele = new Array;
let changing = false,changing_next = false,changing_before = false;

//初始化鼬鼬图片链接
for(var i = 0;i < n;i++)
{
    youyou_pic_src[i] = 'url(./pic/' + (i + 1) + '.jpg';
}
// document.getElementById().append()
//新建好加载列表
for(var i = 0;i < 3;i++)
{
    youyou_onload_ele[i] = document.createElement('div');
    youyou_onload_inner_ele[i] = document.createElement('div');

    youyou_onload_ele[i].append(youyou_onload_inner_ele[i]);
}
//加载youyou_num号鼬鼬到onload_num加载栏目，where记录加载到前面还是后面
function onload_youyou(youyou_num,onload_num,where)
{
    youyou_onload_ele[onload_num].style.backgroundImage = youyou_pic_src[youyou_num];
    youyou_onload_inner_ele[onload_num].style.backgroundImage = youyou_pic_src[youyou_num];
    if(where)
    {
        youyou_move_ele.append(youyou_onload_ele[onload_num])
    }
    else
    {
        youyou_move_ele.insertBefore(youyou_onload_ele[onload_num],youyou_onload_ele[current_onload_youyou])
    }
}

function change_width(num)
{
    youyou_move_ele.style.width = (Number(youyou_move_ele.style.width.replace('px','')) + num) + 'px';
}

onload_youyou(current_youyou,current_onload_youyou,true);
youyou_move_ele.style.width = '600px';

function change_youyou()
{
    if(changing || changing_next || changing_before)
    {
        return;
    }
    changing = true;
    change_width(600);
    onload_youyou((current_youyou + 1) % n,(current_onload_youyou + 1) % 3,true);
    youyou_move_ele.style.transition = 'transform 1s ease';
    youyou_move_ele.style.transform = 'translateX(-600px)';
    setTimeout(() => {
        if(!changing_next && !changing_before)
        {
            youyou_move_ele.removeChild(youyou_onload_ele[current_onload_youyou]);
            change_width(-600);
            youyou_move_ele.style.transition = 'none';
            youyou_move_ele.style.transform = 'none';
            current_youyou++;
            current_youyou %= n;
            current_onload_youyou++;
            current_onload_youyou %= 3;
        }
        changing = false;
    }, 1000);
};

setInterval(change_youyou,2000);

function youyou_next()
{
    if(!changing)
    {
        change_youyou();
    }
    else
    {
        changing_next = true;
        change_width(600);
        onload_youyou((current_youyou + 2) % n,(current_onload_youyou + 2) % 3,true);
        youyou_move_ele.style.transition = 'transform 1s ease';
        youyou_move_ele.style.transform = 'translateX(-1200px)';
        setTimeout(() => {
            youyou_move_ele.removeChild(youyou_onload_ele[current_onload_youyou]);
            youyou_move_ele.removeChild(youyou_onload_ele[(current_onload_youyou + 1) % 3]);
            change_width(-1200);
            youyou_move_ele.style.transition = 'none';
            youyou_move_ele.style.transform = 'none';
            current_youyou += 2;
            current_youyou %= n;
            current_onload_youyou += 2;
            current_onload_youyou %= 3;
            changing_next = false;
        }, 1000);
    }
}

function youyou_before()
{
    if(changing)
    {   
        changing_before = true;
        youyou_move_ele.style.transform = 'translateX(0px)';
        setTimeout(() => {
            youyou_move_ele.removeChild(youyou_onload_ele[(current_onload_youyou + 1) % 3]);
            changing_before = false;
        }, 1000);
    }
    else
    {
        changing_before = true;
        change_width(600);
        onload_youyou((current_youyou - 1) % n,(current_onload_youyou - 1) % 3,false);
        youyou_move_ele.style.transition = 'none';
        youyou_move_ele.style.transform = 'translateX(-600px)';
        youyou_move_ele.style.transition = 'transform 1s ease';
        youyou_move_ele.style.transform = 'translateX(0px)';
        setTimeout(() => {
            if(!changing_next)
            {
                youyou_move_ele.removeChild(youyou_onload_ele[current_onload_youyou]);
                change_width(-600);
                youyou_move_ele.style.transition = 'none';
                youyou_move_ele.style.transform = 'none';
                current_youyou--;
                current_youyou %= n;
                current_onload_youyou--;
                current_onload_youyou %= 3;
            }
            changing_before = false;
        }, 1000);
    }
}