137 lines
4.4 KiB
JavaScript
137 lines
4.4 KiB
JavaScript
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);
|
||
}
|
||
} |