bbh-pc/script/image_switch.js

var tPoster =[
    {
        name :'雍正故宫文物大展',
        href:"https://www.4dkankan.com/showPC.html?m=JPoqsQXL" ,
        src:"./images/poster/trandition (9).jpg",
        show:true
    },
    {
        name :'上海历史博物馆',
        href:"https://shmuseum.4dage.com/web/#/" ,
        src:"./images/poster/trandition (7).jpg",
        show:true
    },
    {
        name :'广东省博物馆',
        href:"http://culture.4dage.com/guangdong_museum/web/index.html#/?m=1050" ,
        src:"./images/poster/trandition (2).jpg",
        show:true
    },
    {
        name:'成都武侯祠博物馆',
        href:'http://4dmodel.com/wuhouci/',
        src:'./images/poster/trandition (1).jpg',
        show:true
    },
    {
        name :'河南博物馆',
        href:"https://www.4dkankan.com/spc.html?m=3FLQO0cwv" ,
        src:"./images/poster/trandition (4).jpg",
        show:true
    },
    {
        name :'四川博物馆',
        href:"http://www.4dmodel.com/SuperTwo/index.html?m=838" ,
        src:"./images/poster/trandition (8).jpg",
        show:true
    },
    {
        name :'山东省博物馆',
        href:"http://www.4dmodel.com/SuperTwo/index.html?m=782" ,
        src:"./images/poster/trandition (6).jpg",
        show:true
    },
    {
        name :'中国民族博物馆',
        href:"https://mp.weixin.qq.com/s/F49onVVc-XfJ0_uJ0_ujmA" ,
        src:"./images/poster/trandition (10).jpg",
        show:true
    },
    {
        name :'河北博物馆',
        href:"http://www.4dage.com/SuperPanoramic/index.html?m=19" ,
        src:"./images/poster/trandition (3).jpg",
        show:true
    },
    {
        name :'内蒙古博物馆',
        href:"http://www.4dage.com/SuperPanoramic/index.html?m=115" ,
        src:"./images/poster/trandition (5).jpg",
        show:true
    },
];
var rPoster = [
    {
        name:'延安梁家河',
        href:'https://4dkanzhan.4dkankan.com/LiangJiaHe/index.html',
        src:'./images/poster/revolution (4).jpg',
        show:true
    },
    {
        name:'韶山毛泽东同志纪念馆',
        href:'http://www.4dmodel.com/SuperTwoCustom/shaoshan/index.html#/',
        src:'./images/poster/revolution (5).jpg',
        show:true
    },
    {
        name:'古田会议纪念馆',
        href:'http://www.4dmodel.com/SuperTwo/index.html?m=770_f',
        src:'./images/poster/revolution (1).jpg',
        show:true
    },
    {
        name:'焦裕禄纪念园',
        href:'http://www.4dmodel.com/SuperTwo/index.html?m=794_f',
        src:'./images/poster/revolution (2).jpg',
        show:true
    },
    {
        name:'金寨县革命博物馆',
        href:'https://www.4dmodel.com/SuperTwoCustom/JinZhai/list.html',
        src:'./images/poster/revolution (3).jpg',
        show:true
    },
    {
        name:'北京宋庆龄同志故居',
        href:'http://www.4dmodel.com/SuperTwo/index.html?m=775_f',
        src:'./images/poster/revolution (6).jpg',
        show:true
    },
    {
        name:'重庆三峡移民纪念馆',
        href:'http://www.4dmodel.com/SuperTwoCustom/SuperTwo710_711/index/home.html',
        src:'./images/poster/revolution (8).jpg',
        show:true
    },
    {
        name:'孙中山纪念馆',
        href:'https://admin.4dmuseum.cn/showPC.html?m=118&bigScene=&novr=',
        src:'./images/poster/revolution (7).jpg',
        show:true
    },
]

let controls = document.querySelectorAll('.exhibition');

for(let control of controls){

    let part = control.querySelectorAll('.cards'),
    partLength = part.length;
    // console.log("partLength",partLength);
    let partArray = [].slice.call(part);
    let indexicon = control.querySelectorAll('.index div');
    let currentIndex = 0;

    control.addEventListener("click",function(e){
        let target = e.target;
        
        if(target.classList.contains("next")){
            let currentPart = partArray[currentIndex],
                nextPart = partArray[(currentIndex+1)%partLength],
                currentIndexIcon = indexicon[currentIndex],
                nextIndexIcon = indexicon[(currentIndex+1)%partLength];
    
    
            currentPart.classList.add("disappear");
            nextPart.classList.remove("disappear");
            currentIndexIcon.classList.remove("index_on");
            nextIndexIcon.classList.add("index_on");
            currentIndex = (currentIndex+1)%partLength;
    
        }
    });
}


//判断是不是PC端访问
function isPC(){  
    var userAgentInfo = navigator.userAgent;
    var Agents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod");  
    var flag = true;  
    for (var v = 0; v < Agents.length; v++) {  
        if (userAgentInfo.indexOf(Agents[v]) > 0) { flag = false; break; }  
    }  
    return flag;  
 }

window.onload = isPC();
if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
    tPoster[3].show = false;
    rPoster[4].show = false;
    poster();
} else if (/(Android)/i.test(navigator.userAgent)) {
    tPoster[3].show = false;
    rPoster[4].show = false;
    poster();
} else {
    poster();
};

function poster(){
    let tradition = document.querySelector('div.tradition');
    let tCards = tradition.querySelectorAll('.cards');
    let revolution = document.querySelector('div.revolution');
    let rCards = revolution.querySelectorAll('.cards');
    let sum = 0;
    for(let i = 0;i<tCards.length; i++){
        let j = 0;
        while(j<4 && sum < tPoster.length){
            if(tPoster[sum].show){
                let imgEl = document.createElement('img');
                imgEl.src = tPoster[sum].src;
                imgEl.alt = tPoster[sum].name;
                imgEl.classList.add('img7');
                let aEl = document.createElement('a');
                aEl.href = tPoster[sum].href;
                aEl.target = '_block';
                aEl.appendChild(imgEl);
                let card = document.createElement('div');
                card.classList.add('card');
                card.appendChild(aEl);
                tCards[i].appendChild(card);
                j++;
            }
            sum++;
            
        }
    }
    sum = 0;
    for(let i = 0;i<rCards.length; i++){
        let j = 0;
        while(j<4 && sum < rPoster.length){
            if(rPoster[sum].show){
                let imgEl = document.createElement('img');
                imgEl.src = rPoster[sum].src;
                imgEl.alt = rPoster[sum].name;
                imgEl.classList.add('img7');
                let aEl = document.createElement('a');
                aEl.href = rPoster[sum].href;
                aEl.target = '_block';
                aEl.appendChild(imgEl);
                let card = document.createElement('div');
                card.classList.add('card');
                card.appendChild(aEl);
                rCards[i].appendChild(card);
                j++;
            }
            sum++;
        }
    }
}