をクリックして画像をポップアップします--プラグイン

輪番--画像をクリックして輪番図をポップアップします.

    ：
1.              
2.    ，     
3.         ，    ；
4.            ，     

html:
`
`
css:

    *{
        margin: 0;
        padding: 0;
    }
    img{
        border: none;
        display: block;
        float: left;
    }
    #wrap{
        width: 800px;
        height: 400px;
        background: #000;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
    }
    #wrap img.smallImg{
        float: left;
        display: block;
        opacity: 0.5;
        filter: alpha(opacity=50);
    }
    #wrap img.cur{
        opacity: 1;
        filter: alpha(opacity=100);
    }
    #wrap img.current{
        opacity: 1;
        filter: alpha(opacity=100);
    }

使用方法:

jump({
    //           ID
    wrapId:'wrap',  
    //           ID
    itemId:'item',
    //          ID
    zoomId:'zoom',
    //        
    width: 1000,
    //        
    height: 420,
    //          
    imgsArr:['images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg','images/5.jpg','images/6.jpg'],
    //       
    bigImgsArr:['images/-1.jpg','images/-2.jpg','images/-3.jpg','images/-4.jpg','images/-5.jpg','images/-6.jpg']
})

js:

function jump(option){
    //     
    var wrap = document.getElementById(option.wrapId)
    //           
    var item = document.createElement('div')
    item.setAttribute('id',option.itemId);
    wrap.appendChild(item)
    // var H =  wrap.currentStyle['height']
    // var H = parseInt(window.getComputedStyle(wrap, null)['height']) || 
    //  a
    for(var i = 0 ; i < option.imgsArr.length; i++){
        var  newImg = document.createElement('img');
        newImg.setAttribute('class','smallImg');
        newImg.src = option.imgsArr[i];
        item.appendChild(newImg);
    }
    //     
    var zoom = document.createElement('div');
    zoom.setAttribute('id',option.zoomId);
    //       
    setGroupCss(zoom,{
        "background":"rgba(0,0,0,.2)",
        "position":"fixed",
        "left":"0",
        "top":"0",
        "width":window.innerWidth,
        "height":window.innerHeight,
        "display":"none"
    })
    wrap.appendChild(zoom)
    //       
    var zoomWrap = document.createElement('div');
    zoomWrap.setAttribute('class','zoomWrap');
    setGroupCss(zoomWrap,{
        "position":"absolute",
        "left":"50%",
        "top":"50%",
        "marginLeft":-option.width/2,
        "marginTop":-option.height/2 ,
        "width":option.width,
        "height":option.height,
        "background":"#fff",
        "overflow":"hidden",    
    })

    zoom.appendChild(zoomWrap);
    //       
    var zoomCon = document.createElement('div');
    zoomCon.setAttribute('class','zoomCon');
    setGroupCss(zoomCon,{
        "position":"absolute",
        "left":0,
        "top":0,
        "width":option.width*7,
        "height":option.height,
        "overflow":"hidden"
    })

    zoomWrap.appendChild(zoomCon);
    //    
    for(var i = 0 ; i < option.bigImgsArr.length; i++){
        var  newBigImg = document.createElement('img');
        newBigImg.src = option.bigImgsArr[i];
        newBigImg.setAttribute('class','bigImg');
        newBigImg.style.float = 'left';
        zoomCon.appendChild(newBigImg);
    }
    //            
    var bigImgs = document.querySelectorAll('.bigImg');
    var firstBigImg = bigImgs[0].cloneNode(true);
    zoomCon.appendChild(firstBigImg)

    //     
    var arrowR = document.createElement('span');
    arrowR.innerHTML = ">";
    setGroupCss(arrowR,{
        "position":"absolute",
        "right":10,
        "top":"50%",
        "marginTop":-30,
        "width":40,
        "height":60,
        "fontSize":"40px",
        "fontFamily":"  ",
        "textAlign":"center",
        "lineHeight":"60px",
        "fontWeight":"bold",
        "cursor":"pointer",
        "background":"rgba(0,0,0,.1)",
        "color":"#fff",
        "zIndex":9999
    })
    
    zoomWrap.appendChild(arrowR)
    //     
    var arrowL = document.createElement('span');
    arrowL.innerHTML = "<";
    setGroupCss(arrowL,{
        "position":"absolute",
        "left":10,
        "top":"50%",
        "marginTop":-30,
        "width":40,
        "height":60,
        "fontSize":"40px",
        "fontFamily":"  ",
        "textAlign":"center",
        "lineHeight":"60px",
        "fontWeight":"bold",
        "cursor":"pointer",
        "background":"rgba(0,0,0,.2)",
        "color":"#fff",
        "zIndex":9999
    })
    zoomWrap.appendChild(arrowL)

    var Imgs = document.querySelectorAll('.smallImg');

    var num = 0;
    for(var i = 0 ; i < Imgs.length; i++){
        Imgs[i].index = i;
        //      
        Imgs[i].onmouseover = function(){
            console.log(1111)
            for(var j = 0 ; j < Imgs.length; j++){
                Imgs[j].className = 'smallImg';
            }
            this.className += 'cur';
        }
        //      
        Imgs[i].onmouseout = function(){
            this.className = 'smallImg';
        }
        //    
        Imgs[i].onclick = function(e){
            var e = e || window.event;
            e.stopPropagation()
            zoom.style.display = 'block';
            zoomCon.style.left = -option.width * this.index + 'px';
            num = this.index;
            console.log(num)
        }
    }
    //       

    arrowR.onclick = function(e){
        var e = e || window.event;
        e.stopPropagation()
        num++;  
        if(num > bigImgs.length){
            num = 1;
            zoomCon.style.left = 0;
        }
        go(zoomCon,-option.width * num)
    }
    arrowL.onclick = function(e){
        var e = e || window.event;
        e.stopPropagation()
        num--;
        if(num <0){
            num = bigImgs.length-1;
            zoomCon.style.left = -option.width * (bigImgs.length) + 'px';
        }
        go(zoomCon,-option.width * num)
    }

    //          
    document.onclick = function(e){
        if(e.target.id != option.wrapId  || e.srcElement.id){
            zoom.style.display = 'none';
        }
    }

    //    
    function go(obj,target){
        clearInterval(obj.timer)
        var speed = obj.offsetLeft < target? 30 : -30;
        obj.timer=setInterval(function(){
            var result = obj.offsetLeft - target;
            obj.style.left=obj.offsetLeft + speed +"px"
            if(Math.abs(result) <= 30){
                clearInterval(obj.timer);
                obj.style.left = target +"px"
            }
        },10)
    }
    
    //    css  
    function setGroupCss(ele,options){
        //  json       
        if(Object.prototype.toString.call(options) !=='[object Object]'){
            console.log('aaaa')
            return;
        }
        //  options    ，  setCss()    
        for(var key in options){

            if(options.hasOwnProperty(key)){
                setCss(ele,key,options[key])
            }
        }
    }
    //    css  
    function setCss(ele,attr,value){
         //  float
         if(attr === 'float'){
            ele['style']['cssFloat'] = value;
            ele['style']['styleFloat'] = value;
            return;
         };
         //  opacity
         if(attr === 'opacity'){
            console.log(111)
            ele['style']['opacity'] = value;
            ele['style']['filter'] = 'alpha(opacity='+ value*100+')';
            return;
         };
        //   value           ；
        var reg = /^(width|height|top|bottom|left|right|((margin|pading)(Top|Bottom|Left|Right)?))$/;
        if(reg.test(attr)){
            //     value           ；           
            if(!isNaN(value)){  //  value         ，       ，    
                value += 'px'; 
            }
        }
        ele['style'][attr] = value;
    }


}

転載先:https://www.cnblogs.com/rainbow8590/p/7096131.html