js基础图片切换

2021-05-04 02:26

阅读：454

YPE html>

标签：otto window bottom dev meta ext1 osi value set

图片切换

    var arrUrl = [‘https://c-ssl.duitang.com/uploads/item/201708/29/20170829092524_t8mf4.thumb.700_0.jpeg‘,
                ‘http://n.sinaimg.cn/sinacn04/377/w533h644/20180403/3a48-fysuuxz8638223.jpg‘,
                ‘https://07.imgmini.eastday.com/mobile/20180126/435bdb37f7f347e266bcc98621ac5146.jpeg‘];
    var arrText = [‘李沁‘,‘乔欣‘,‘宋祖儿‘];
    var arrText1=[‘图片可从最后一张跳转到第一张‘,‘图片只能到最后一个或第一张切换‘]

    var num = 0;
    var onoff = true;
    function frimg(){
        oSpan.innerHTML = num+1 +‘/‘+ arrUrl.length;
        oText2.innerHTML = arrText[num];
        oImg.src = arrUrl[num];
        oText1.innerHTML = arrText1[0];

    }

    frimg();

    oBtn1.onclick = function(){
        onoff = true;
        oText1.innerHTML = arrText1[0];
    }
    oBtn2.onclick = function(){
        onoff=false;
        oText1.innerHTML =arrText1[1];
    }

    oPre.onclick = function(){
        num--;
        if(num ==-1){
            if(onoff){
                num = arrUrl.length-1;
            }else{
                alert(‘已经是第一张啦~‘)
                num= 0;
            }

        }
        frimg(); 

    };

    oNext.onclick = function(){
        num++;
        if(num == arrUrl.length){
            if(onoff){
                num = 0;
            }else{
                alert(‘已经到最后一张啦~‘)
                num = arrUrl.length-1;
            }
        }        
        frimg();
    }

}