触屏轮播 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
    <meta name="apple-touch-fullscreen" content="yes" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <script src="js/jquery-1.8.1.min.js"></script>
    <title>Document</title>
    <style>
        *{ margin:0px; padding:0px; }
        body,html{ width:100%; height:50%; }
        div#rect{ width:100%; height:50%;}
        #scrollimg{
            position: relative;
            width: 200px;
            height: 110px;
            margin: 0 auto;
            overflow: hidden;
        }
        #scrollimg ul{
            position: absolute;
            top: 0;
            left: 0;
            width: 800px;
        }
        #scrollimg ul li{
            float: left;
            width: 200px;
            height: 110px;
            list-style: none;
        }
        #scrollimg ul li img{
            display: block;
            width: 200px;
            height: 110px;
        }
        #scrollimg ul li:nth-of-type(1) img{
            background: #fbb03b;
        }
        #scrollimg ul li:nth-of-type(2) img{
            background: #fc5252;
        }
        #scrollimg ul li:nth-of-type(3) img{
            background: #b266f2;
        }
        #scrollimg ul li:nth-of-type(4) img{
            background: #d1c0a5;
        }
        #scrollimg ol{
            position: absolute;
            bottom: 10px;
            right: 10px;
            list-style: none;
        }
        #scrollimg ol li{
            float: left;
            width: 10px;
            height: 10px;
            margin-right: 5px;
            border-radius: 50%;
            background: rgba(255,255,255,0.5);
            
        }
        #scrollimg ol .active{
            background: #E4393C;
        }
    </style>
</head>
<body>
     
     <div id="rect">
        <div id="dire"></div>
 
    </div>
     
      <div id="scrollimg">
        <ul>
            <li><a href="javascript:;"><img src="" alt=""></a></li>
            <li><a href="javascript:;"><img src="" alt=""></a></li>
            <li><a href="javascript:;"><img src="" alt=""></a></li>
            <li><a href="javascript:;"><img src="" alt=""></a></li>
        </ul>
    </div> 
    <script>
    (function(){
        
        var LSwiperMaker = function(o){ 
 
            var that = this;
            this.config = o;
            this.control = false;
            this.sPos = {};
            this.mPos = {};
            this.dire;
     
            // this.config.bind.addEventListener('touchstart', function(){ return that.start(); } ,false);
            // 这样不对的，event对象只在事件发生的过程中才有效;
            this.config.bind.addEventListener('touchstart', function(e){ return that.start(e); } ,false);
            this.config.bind.addEventListener('touchmove', function(e){ return that.move(e); } ,false);
            this.config.bind.addEventListener('touchend', function(e){ return that.end(e); } ,false);
 
        }
 
        LSwiperMaker.prototype.start = function(e){
             
             var point = e.touches ? e.touches[0] : e;
             this.sPos.x = point.screenX;
             this.sPos.y = point.screenY;
 
        }
        LSwiperMaker.prototype.move = function(e){  
 
            var point = e.touches ? e.touches[0] : e;
            this.control = true;
            this.mPos.x = point.screenX;
            this.mPos.y = point.screenY;
        }
 
        LSwiperMaker.prototype.end = function(e){
 
            this.config.dire_h  && (!this.control ? this.dire = null : this.mPos.x > this.sPos.x ? this.dire = 'R' : this.dire = 'L')
            this.config.dire_h  || (!this.control ? this.dire = null : this.mPos.y > this.sPos.y ? this.dire = 'D' : this.dire = 'U')
 
            this.control = false;
            this.config.backfn(this);
            var scrollimg = this.config.bind;
            var width = $(scrollimg).find('li').width();
            var left = $(scrollimg).find('ul').css('left');
            if(this.dire == 'L'){
                left= parseInt(left)-200 +'px' ;
                if(left == '-800px')    left=0;
                $(scrollimg).find('ul').css('left',left)
            }else{
                 left= parseInt(left) + 200 +'px' ;
                if(left == '200px')   left=-600;
                $(scrollimg).find('ul').css('left',left)
            }
        }
 
        window.LSwiperMaker = LSwiperMaker;
        document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);// 禁止微信touchmove冲突
 
    }())
 
    var a = new LSwiperMaker({
        bind:document.getElementById("scrollimg"),  // 绑定的DOM对象
        dire_h:true,     //true 判断左右， false 判断上下
        backfn:function(o){    //回调事件
             document.getElementById("dire").innerHTML = "向"+ o.dire + "滑";  
        }
    })
 
    </script>
</body>
</html>

 

posted on 2016-04-08 18:50  DFrain  阅读(239)  评论(0)    收藏  举报

导航