bbh-pc/script/flow.js

let row1s = [].slice.call(document.querySelectorAll(".row1")),
    row1Length = row1s.length,
    row2s = [].slice.call(document.querySelectorAll(".row2")),
    row2sLength = row2s.length;
    // aboveInisialLeft = row1.offsetLeft,
    
    // belowInisialLeft = row2.offsetLeft;

const LEFT = 1,RIGHT = 2;

for(let i = 0; i < row1Length; i++){
    console.log(i);
    let aboveIntervalId,belowIntervalId,
        aboveInisialLeft = row1s[i].offsetLeft,
        belowInisialLeft = row2s[i].offsetLeft;

        animate(row1s[i],1,1);
        animate(row2s[i],2,1);
}

/**
 * 
 * @param {HTMLElement} row 
 * @param {String} direction 
 * @param {integer} velocity 
 */
function animate(row,direction,velocity){
    let treasureArray =  row.querySelectorAll(".treasure"),
        tLength = treasureArray.length,
        boxWidth = row.querySelector(".treasure").offsetWidth,
        allBoxsWidth = boxWidth * tLength  - 0.9 *innerWidth,
        inisialLeft = row.offsetLeft;
        // console.log("tLength",tLength,"inisialLeft",inisialLeft,"allBoxsWidth",allBoxsWidth);
    if(direction == LEFT){
        aboveIntervalId = setInterval(()=>{
            row.style.left = (row.offsetLeft - velocity) + 'px';
            // console.log("LEFT",row.style.left);
            if(row.offsetLeft < -1 * (allBoxsWidth)){
                row.style.left = inisialLeft + 'px';
            }
        },16);
        
    }else if(direction == RIGHT){
        belowIntervalId = setInterval(()=>{
            row.style.left = (row.offsetLeft + velocity) + 'px';
            // console.log("RIGHT",row.style.left);
            if(row.offsetLeft  > allBoxsWidth){
                row.style.left = inisialLeft  + 'px';
            }
        },16); 

    }
}


row1.onmouseover = ()=>{
    clearInterval(aboveIntervalId);    
}
row1.onmouseleave = ()=>{
    animate(row1,LEFT,1);
};

row2.onmouseover = ()=>{
    clearInterval(belowIntervalId);    
}
row2.onmouseleave = ()=>{
    animate(row2,RIGHT,1);
};


// let museums = document.querySelector(".museum");






// let iframe = document.querySelector("#visiting");
// let row1TreasureNodes = museum.querySelectorAll(".treasure");
// let name;
//TODO:给底部博物馆名添加监听器

// let row1Treasures = [].slice.call(row1TreasureNodes);
/*
for(let i = 0; i < row1TreasureNodes.length;i++){
    row1TreasureNodes[i].addEventListener("click",(e,i)=>{
        // iframe.contentWindow.location.href = urls[i];
        iframe.classList.remove("disappear");
    });
}
*/

// function switchMuseum(){
    
//     let museumButtons = document.querySelectorAll(".museumname"),
//         mbLength = museumButtons.length,
//         museums = document.querySelector(".museum"),
//         mLength = museums.length;
//     for(let i = 0; i < museumButtons; i++){
//         museumButtons[i].addEventListener("click",(e,index = i)=>{
//             let target = e.target;
//             museums[i].classList.add("appear");
//             console.log("switch");
//         })
//     }

// }
// switchMuseum();

let museumButtons = [].slice.call(document.querySelectorAll(".museumname")),
    mbLength = museumButtons.length,
    museums = [].slice.call(document.querySelectorAll(".museum")),
    mLength = museums.length;
for(let i = 0; i < museumButtons; i++){
    museumButtons[i].addEventListener("click",(e,index = i)=>{
        let target = e.target;
        museums[index].classList.add("appear");
        console.log("switch",i);
    });
}