<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{margin:0;padding:0;text-align:center;}
        li{list-style:none;}

        .warp{width:470px;overflow:hidden;margin:100px auto 0;position:relative;height:150px;}
        .box{position:absolute;left:0;top:0;}
        .box li{float:left;width:470px;}
        a{display:block;width:100px;height:100px;background:red;margin-top:5px;}
    </style>
</head>
<body>
<div class="warp">
    <ul class="box">
        <li><img src="img/1.jpg"></li>
        <li><img src="img/2.jpg"></li>
        <li><img src="img/3.jpg"></li>
        <li><img src="img/4.jpg"></li>
        <li><img src="img/5.jpg"></li>
    </ul>
</div>
<a id="prev">1</a><a id="next">2</a>
<script>
window.onload=function(){
    var oWarp=document.getElementsByClassName('warp')[0];
    var oUl=document.getElementsByClassName('box')[0];
    var oLi=document.getElementsByTagName('li');
    var prev=document.getElementById('prev');
    var next=document.getElementById('next');
    oUl.style.width=oLi[0].offsetWidth*oLi.length+'px';
    var num=0;
    function getStyle(obj,attr){if(obj.currentStyle){return obj.currentStyle[attr]}else{return getComputedStyle(obj,33)[attr]}}
    function move(obj,json,fn) {clearInterval(obj.timer);obj.timer = setInterval(function () {var mStop=true; /*当所有的值都到达*/for(var attr in json) {/*取当前值*/var com =0;if(attr=='opacity'){com=parseInt(parseFloat(getStyle(obj, attr))*100);}else{com=parseInt(getStyle(obj, attr))}/*计算速度*/var iSpeed = (json[attr] - com) / 8;iSpeed=iSpeed>0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);/*检测*/if(com != json[attr]){mStop=false}if(attr=='opacity'){obj.style.filter='alpha(opacity:'+(com+iSpeed)+')';obj.style.opacity = (com+iSpeed)/100;}else{obj.style[attr] = com + iSpeed + 'px';}}if(mStop){clearInterval(obj.timer);if(fn){fn()}}},30)}
    oUl.ontouchstart=function(ev){
        var touch=ev.changedTouches[0];
        var disX=touch.pageX;
        var offset=this.offsetLeft;
        var but=true;
        var datime=Date.now();
        oUl.ontouchmove=function(ev){
            var touch=ev.changedTouches[0];
            if(this.offsetLeft>=0){
                if(but){
                    but = false;
                    disX = touch.pageX;
                }//往左滑动一点,在往左滑,会跳跃一下
                this.style.left=(touch.pageX-disX+offset)/3+'px';
            }else if(this.offsetLeft<=oWarp.offsetWidth-oUl.offsetWidth){
                if(but){
                    but=false;
                    disX=touch.pageX;
                }
                this.style.left=(touch.pageX-disX)/3+(oWarp.offsetWidth-oUl.offsetWidth)+'px';
            }else{
                this.style.left=touch.pageX-disX+offset+'px';
            }
        };
        oUl.ontouchend=function(ev){
            var touch=ev.changedTouches[0];
            if(touch.pageX<disX){
                if(num!=oLi.length-1){
                    if(disX-touch.pageX>oLi[0].offsetWidth/2 && Date.now()-datime <300 && disX-touch.pageX>30){
                    num++;//disX-touch.pageX>30兼容ios
                    }
                }
                move(oUl,{left:-num*oLi[0].offsetWidth});
            }else{
                if(num!=0){
                    if(touch.pageX-disX>oLi[0].offsetWidth/2 && Date.now()-datime <300 && touch.pageX - disX>30){
                        num--;
                    }
                }
                move(oUl,{left:-num*oLi[0].offsetWidth});
            }
            oUl.ontouchend=oUl.ontouchmove=null;
        }
    };
    prev.onclick=function(){
        if(num!=oLi.length-1){
            num++;
        }
        move(oUl,{left:-num*oLi[0].offsetWidth});
    };
    next.onclick=function(){
        if(num!=0){
            num--;
        }
        move(oUl,{left:-num*oLi[0].offsetWidth});
    }
}
</script>
</body>
</html>

更多文章请关注《万象专栏》