移动端banner 手写~~~简单明了-原创手记-慕课网

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="关键词">
<meta name="Description" content="描述">
<meta name="viewport" content="width=640,target-densitydpi=device-dpi,user-scalable=no">
<title>Document</title>
<style>/css样式表的衣柜/
*{margin:0px;padding:0px;}
html,body{
width:100%;height:100%;overflow:hidden;
}

div{

        width:2560px;height:400px;position:relative;left:0px;

    }
    img{
        float:left;
    }
    #icon{
        width:200px;height:25px;margin:10px auto;
    }
    i{display:block;width:25px;height:25px;border-radius:50%;
    border:1px solid red;float:left;margin-right:23px;}
    .curr{background:red;}
    </style>
</head>
<body><!--身体-->
    <div id="div">
        <a href="http://www.baidu.com"><img src="images/1.jpg" width="640" height="400"></a>
        <a href="http://www.baidu.com"><img src="images/2.jpg" width="640" height="400"></a>
        <a href="http://www.baidu.com"><img src="images/3.jpg" width="640" height="400"></a>
        <a href="http://www.baidu.com"><img src="images/4.jpg" width="640" height="400"></a>
    </div>
    <div id="icon">
        <i class="curr"></i>
        <i></i>
        <i></i>
        <i></i>
    </div>
</body>
<script>
    var div = document.getElementById("div");
    var icons = document.getElementById("icon").children;
    //var iS = icon.getElementsByTagName("i");
    var x=0;
    var startX = 0;//div的初始坐标
    var scroll = 0;//拖动的距离
    document.addEventListener("touchmove",function(e){
        e.preventDefault();

    });
    document.addEventListener("touchstart",function(e){
        x = e.changedTouches[0].pageX;
        startX = scroll;
        this.style.transition = "";
    })
    div.addEventListener("touchmove",function(e){
        var xL = e.changedTouches[0].pageX - x;

        scroll = startX + xL;
        this.style.left = scroll +"px";
        this.style.transition = "";
        //console.log(scroll);
    })
    div.addEventListener("touchend",function(e){
        var xL = e.changedTouches[0].pageX - x;
        scroll = startX + xL;
        var n = -scroll/640;
        //n%1  1.3%1 = 0.5 

        n = n%1<0.3?Math.floor(n):Math.ceil(n);
        if (n<0)
        {
            n = 0
        }else if (n>3)
        {
            n = 3;
        }
        scroll = -n*640;
        this.style.left = scroll+"px";
        for (var i =0; i<icons.length ; i++)
        {
            if (i != n)
            {
                icons[i].className = "";
            }else{
                icons[i].className = "curr";
            }
        }
        this.style.transition = "0.5s linear";
    })
</script>

</html>