手机网页轮播切换，简易版

浏览数：25 / 时间：2015年06月11日

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="format-detection"content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <title>手机轮播</title>
</head>

<style>
*{
    padding:0;
    margin:0;
}
ul,li{
    list-style:none;
}
body{
    width:100%;
    overflow: hidden;
}
.mt10{margin-top:10px;}
.mt20{margin-top:20px;}
.nav{
    width:100%;
    height:40px;
    line-height:40px;
    display:-webkit-box;
    -webkit-box-orient:horizontal;
    background:orange;
}
.nav li{
    width:20%;
    text-align: center;
}
.nav li a{
    color:#fff;
    text-decoration:none;
    font-weight:bold;
    display: block;
    transition:all .2s ease-in;
}
.nav li a:hover{
    background:rgba(225,225,225,.5);
}
#box{
    background:#f0f0f0;
    height:250px;
    overflow:hidden;
}
.img-list{
    display:-webkit-box;
    -webkit-box-orient:horizontal;
    transition:all .2s ease-in;
}
.img-list li{
    display:-webkit-box;
    -webkit-box-pack:center;
    -webkit-box-align:center;
    -webkit-transform:translate3d(0,0,0);
}
</style>


<body>

    <header>
        <nav>
            <ul class="nav">
                <li><a href="#">首页</a></li>
                <li><a href="#">导航</a></li>
                <li><a href="#">产品</a></li>
                <li><a href="#">联系</a></li>
                <li><a href="#">地址</a></li>
            </ul>
        </nav>
    </header>
    
    <section class="mt10" id="box">
        <ul class="img-list">
            <li><a href="#"><img src="http://pic.jxnews.com.cn/0/02/40/67/2406711_955318.jpg" alt=""></a></li>
            <li><a href="#"><img src="http://www.xingbar.com.cn/pmap/16beac34dae343313080d02ea07c0ddd.bmp" alt=""></a></li>
            <li><a href="#"><img src="http://www.bdall.com/attachments/2014/01/1880_201401141612351qo4J.thumb.jpg" alt=""></a></li>
            <li><a href="#"><img src="http://www.easyhomehouseware.com/img/aHR0cDovL25jYXIuY2MvYXR0YWNobWVudHMvMjAxMS8wNC8xXzIwMTEwNDIwMTcwMzI0MVdlZTIudGh1bWIuanBn.jpg" alt=""></a></li>
            <li><a href="#"><img src="http://www.bdall.com/attachments/2012/01/156142_2012013110372932hh7.thumb.jpg" alt=""></a></li>
        </ul>
    </section>


<script>

    function Slider(options)
    {
        this.box = options.box;
        //获取dom元素方法
        this.getDom();
        this.goSlider();
    }

    Slider.prototype.getDom = function()
    {
        //获取窗口宽度
        this.windowWidth = window.innerWidth;
        //获取dom元素
        var box = this.box;
        this.ul = box.getElementsByTagName(‘ul‘)[0];
        var ul = this.ul;
        this.li = ul.getElementsByTagName(‘li‘);
        var li = this.li;


        box.style.width = this.windowWidth +‘px‘;

        for(var i = 0 , len = li.length ; i < len ; i++ )
        {
            li[i].style.width = this.windowWidth +‘px‘;
        }

        ul.style.width = this.windowWidth * (li.length) +‘px‘;
    }

    //go
    Slider.prototype.goSlider = function()
    {    
        var num = 0;
        var self = this;
        var ul = this.ul;
        var li = this.li;
        var wWidth = this.windowWidth;
        //开始
        var sliderStart = function(event)
        {
            //最开始的位置
            self.startX = event.touches[0].pageX;
        }
        //移动
        var sliderMove = function(event)
        {
            //如果是单个手指的话才执行
            if (event.targetTouches.length == 1) 
            {    
                //阻止事件默认行为
                event.preventDefault();
                self.offsetX = event.targetTouches[0].pageX - self.startX;
            }
        }
        //结束
        var sliderEnd = function()
        {
            // event.preventDefault();
            var windowWidth = window.innerWidth;
            //切换判断
            if ( self.offsetX < 0 ) 
                {    
                    if (num < li.length -1 ){
                        num++;
                    }else{
                        num = li.length-1;
                    }
                    ul.style.webkitTransform = ‘translate3d(-‘+ wWidth * num +‘px,0,0)‘;
                }else{

                    if ( num > 0 ){
                        num--;
                    }else{
                        num = 0;
                    }
                    ul.style.webkitTransform = ‘translate3d(-‘+ wWidth * num +‘px,0,0)‘;
            }

        }
        //监听touchstart,touchmove,touchend
        box.addEventListener(‘touchstart‘,sliderStart);
        box.addEventListener(‘touchmove‘,sliderMove);
        box.addEventListener(‘touchend‘,sliderEnd);
    }


    new Slider({
        box:document.getElementById(‘box‘)
    });

</script>
    
</body>
</html>