js图片切换通用模板适应各种点击滑动拖动

　　在很多软件网站的详情页，我们都可以看到一种图集的展示效果。pc端可以实现点击，拖拽进行切换，手机端可以实现滑动切换。这么好的效果，js是怎么实现的呢?

　　首先我先布置一下css和html：

　　样式：
        button{
            width: 100px;
            height: 50px;
        }
        .box{
            width: 200px;
            height: 200px;
            position: absolute;
            z-index: 1;
        }
        .box:nth-of-type(1){
            background-color: yellow;
            left: 100px;
            top: 100px;
        }
        .box:nth-of-type(2){
            background-color: orange;
            left: 250px;
            top: 70px;
            width: 250px;
            height: 250px;
            z-index: 2;
        }
        .box:nth-of-type(3){
            background-color: green;
            left: 450px;
            top: 100px;
        }

　　html：

　　重点JS：

window.onload=function(){
    var oBig=document.getElementById('bigbox');
    var arrDiv=document.getElementsByClassName('box');
    var oBtn1=document.getElementById('btn1');
    var oBtn2=document.getElementById('btn2');
    var aPos=[];
//获取样式数据
    for(var i=0;i<arrDiv.length;i++){
        aPos[i]={'left':parseInt(arrDiv[i].offsetLeft),'top':parseInt(arrDiv[i].offsetTop),'width':parseInt(arrDiv[i].offsetWidth),'height':parseInt(arrDiv[i].offsetHeight),'zIndex':parseInt(igetStyle(arrDiv[i],'zIndex'))};
    }
//样式类型转换
    for(var j=0;j<arrDiv.length;j++){
        arrDiv[j].style.position='absolute';
        arrDiv[j].style.left=aPos[j].left+'px';
        arrDiv[j].style.top=aPos[j].top+'px';
        arrDiv[j].style.margin=0;
    }
//pc手机拖滑切换    
    oBig.onmousedown=oBig.ontouchstart=function(e){
        var e=e||event;
        var doc=document.documentElement||document.body;

        if(e.touches){
            var dx=e.changedTouches[0].clientX;
        }else{
            var dx=e.clientX;
        }

        doc.onmouseup=doc.ontouchend=function(e){
            if(e.touches){
                var num=e.changedTouches[0].clientX-dx;
            }else{
                var num=e.clientX-dx;
            }
            
            if(num>0){
                goPre();
            }else if(num<0){
                goNext();
            }
            this.onmouseup=this.ontouchend=null;
        }
        return false;
    }
//点击切换    
    oBtn1.onclick=goPre;
    oBtn2.onclick=goNext;
//向前翻
    function goPre(){
        aPos.unshift(aPos[aPos.length-1])
        aPos.pop();
        for(var k=0;k<arrDiv.length;k++){
            arrDiv[k].style.zIndex=aPos[k].zIndex;
            buffer(arrDiv[k],{'left':aPos[k].left,'top':aPos[k].top,'width':aPos[k].width,'height':aPos[k].height})
        }
    }
//向后翻    
    function goNext(){
        aPos.push(aPos[0]);
        aPos.shift();
        for(var k=0;k<arrDiv.length;k++){
            arrDiv[k].style.zIndex=aPos[k].zIndex;
            buffer(arrDiv[k],{'left':aPos[k].left,'top':aPos[k].top,'width':aPos[k].width,'height':aPos[k].height})
        }
    }
//获取样式    
    function igetStyle(obj, attr) {
            return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr];
        }
//缓冲运动框架    
    function buffer(obj, json, endFn) {
        clearInterval(obj.timer);
    
        obj.timer = setInterval(function() {
            var bestop=true;
            for(attr in json){            
                //取当前值
                var curr = 0;
                if (attr == 'opacity') {
                    if(json[attr]<2)json[attr]=json[attr]*100;
                    curr = parseInt(parseFloat(igetStyle(obj, attr)) * 100);
                } else {
                    curr = parseInt(igetStyle(obj, attr));
                }            
                //计算速度
                var speed = (json[attr] - curr) / 8;
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);            
                //开始赋值
                if (attr == 'opacity') {
                    obj.style[attr] = (curr + speed) / 100;
                } else {
                    obj.style[attr] = curr + speed + 'px';
                }            
                //检测停止            
                if(curr!=json[attr])bestop=false;
            }
            //执行停止
            if (bestop) {
                clearInterval(obj.timer);
                endFn && endFn();
            }
        }, 30)
    }
}
　　这个js模板，无论你的样式是用浮动还是定位，都可以实现效果，因为在样式转换的步骤中，我将元素全部转为了决定定位。也正因为如此，所以有一点需要注意，图片列表的父级元素，你要设置为相对定位或者是绝对定位。