Web前端框架与移动应用开发第七章

1.练习1：焦点图切换
html:
<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <title>第七章上机练习一</title>
    <link rel="stylesheet" href="css/train1.css"/>
    <script>
        /*直接设置样式*/
        document.getElementsByTagName("html")[0].style.fontSize=window.screen.width/10+"px";
    </script>
</head>
<body>
<section id="picWrap">
    <div id="picList">
        <img src="image/img1.jpg" />
        <img src="image/img2.jpg" />
        <img src="image/img3.jpg" />
        <img src="image/img4.jpg" />
    </div>
</section>
<p id="picBtns">
    <span class="active"></span>
    <span></span>
    <span></span>
    <span></span>
</p>
<script>
    document.addEventListener('touchmove',function(e) {
        e.preventDefault();
    },false);

    window.onload=function()
    {
        var oPicList=document.getElementById("picList");
        var aBtns=document.getElementById("picBtns").children;
        var iScroll=0;
        var iStartX=0;
        var iStartPageX=0;
        var iNow=0;
        oPicList.addEventListener('touchstart',function(ev)
        {
            iStartPageX=ev.changedTouches[0].pageX;
            iStartX=iScroll;
            oPicList.style.WebkitTransition=oPicList.style.MozTransition=oPicList.style.transition="none";
        },false);

        oPicList.addEventListener('touchmove',function(ev)
        {
            var iDis=ev.changedTouches[0].pageX-iStartPageX;
            iScroll=iStartX+iDis;
            setStyle();
        },false);

        oPicList.addEventListener('touchend',function(ev)
        {
            var iDis=ev.changedTouches[0].pageX-iStartPageX;
            var iNub=Math.round(iDis/window.screen.width);
            iNow-=iNub;
            if(iNow<0)
            {
                iNow=0;
            }
            if(iNow>=aBtns.length)
            {
                iNow=aBtns.length-1;
            }
            iScroll=-iNow*window.screen.width;
            oPicList.style.WebkitTransition=oPicList.style.MozTransition=oPicList.style.transition=".5s";
            for(var i=0;i<aBtns.length;i++)
            {
                aBtns[i].className="";
            }
            aBtns[iNow].className="active";
            setStyle();
        },false);
        function setStyle()
        {
            oPicList.style.WebkitTransform=oPicList.style.MozTransform=oPicList.style.transform="translateX("+iScroll+"px)";
        }
    };
</script>
</body>
</html>
View Code