web前端案例-苹果手机图片查看器

web前端群，189394454，有视频、源码、学习方法等大量干货分享
image.png

👇html代码：

        <div id="iphone"><!--结构父级-->
            <div id="wrap">
                <ul id="ul">
                    <li style="background:url(images/pic1.png)"></li>
                    <li style="background:url(images/pic2.png)"></li>
                    <li style="background:url(images/pic3.png)"></li>
                    <li style="background:url(images/pic4.png)"></li>
                </ul>
            </div>
        </div>

下css代码：

        <style type="text/css">
        /*  选择器{样式属性名称:属性值;}
            选择器的意思就是说你到底要改变什么标签（可视化标签）
        */
        body{background:#333}
        *{margin:0;padding:0}
        #iphone{width:900px;height:600px;background:url("images/bg.png");
                margin:100px auto;/*上下 左右*/;
                position:relative;}
        #wrap{width:240px;height:360px;overflow:hidden;/*超出隐藏*/
            position:absolute;left:326px;top:121px;}
        #ul{width:960px;height:360px;cursor:pointer;
            position:absolute;left:0px;top:0;}
        #ul li{width:240px;height:360px;
                list-style:none;float:left;/*浮动-左看齐*/}
        </style>

下javascript代码：

        <script>
            window.onload = function(){
                var oUl = document.getElementById("ul");
                var oLi = oUl.getElementsByTagName("li");
                var disX = 0;
                var downX = 0;
                var iNow = 0;
                var timer = null;
                var iSpeed =0;
                oUl.onmousedown = function(ev){
                    var ev = ev || window.event;
                    disX = ev.clientX-oUl.offsetLeft;
                    downX = ev.clientX;
                    clearInterval(timer);
                    document.onmousemove = function(ev){
                        var ev = ev || window.event;
                        oUl.style.left = ev.clientX-disX+"px";
                    }
                    document.onmouseup = function(ev){
                        document.onmousemove = document.onmouseup =null;
                        var ev = ev || window.event;
                        if(ev.clientX<downX){
                            //alert("←")
                            if(iNow != oLi.length-1){
                                iNow++;//iNow=iNow+1
                            }
                            startMove(-iNow*oLi[0].offsetWidth);
                        }else{
                            //alert("→")
                            if(iNow !=0){
                                iNow--;
                            }
                            startMove(-iNow*oLi[0].offsetWidth);
                        }               
                    }
                    return false;
                }
                function startMove(iTarget){
                    clearInterval(timer);
                    timer = setInterval(function(){
                        iSpeed +=(iTarget-oUl.offsetLeft)/6;
                        iSpeed *=0.75;
                        
                        if(Math.abs(iSpeed)<=1 && Math.abs(iTarget-oUl.offsetLeft)<=1){
                            clearInterval(timer);
                            iSpeed = 0;
                            oUl.style.left = iTarget+'px';
                        }else{
                            oUl.style.left = oUl.offsetLeft+iSpeed+"px";    
                        }

                    },30);
                }
            }
        </script>