手机轮播事件，JQ 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta http-equiv="Content-Type" content="text/html; 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-status-bar-style" content="black" />
<title>无标题文档</title>
</head>
<style>
body {
    margin: 0;
    padding: 0;
    background: #333;
    overflow: hidden;
}
li, ul {
    list-style: none;
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
}
/* 使得图片居中 webkit-box */
    li {
    position: absolute;
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    -webkit-backface-visibility:hidden;

}
li img {
    max-width: 100%;
    max-height: 100%;
}
/* 隐藏画布外的内容 */
    #canvas {
    height: 100%;
    width: 100%;
    overflow: hidden;
    
}
</style>

<body>

<div id="canvas" >
   <ul style="margin-left:0px">

        <li ><img src="imgs/21.jpg"></li>
        <li ><img src="imgs/22.jpg"></li>
        <li ><img src="imgs/23.jpg"></li>
        <li ><img src="imgs/24.jpg"></li>

   </ul>
</div>
</body>
</html>
<script src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
     var warW=$(window).width();// 屏的宽度
     var warH=$(window).height(); //屏的高度
     var oUi=$("#canvas ul")
     var liLen=$("#canvas ul li").length;
     var warNum=warW/warH;  // 屏的宽与高的比例
     var oLi=$("#canvas ul li");
     
     var starTime,oLiX,sefX,MoLiX,endTime,numMl;
     var $indexLi="";
     var numMl='';
     oUi.width(warW).height(warH);
     oLi.width(warW);
/*
初始图片 在一屏上自适应显示
*/
     oLi.each(function(){
            var ImgNum= $(this).find("img").width()/$(this).find("img").height();
             if(warNum>ImgNum){
                   $(this).find("img").width($(this).find("img").width())
             }else{
                     $(this).find("img").height($(this).find("img").height())
             }
     });

/*
初始图片水平 排列
*/
        for(var i=0;i<liLen; i++){
                  //svar $this=$(this).index();
                var NumX=i*warW+"px";
                oLi.eq(i).css({
                        "transform":"translateX("+NumX+")"
                })
        }
        
        
        
        
/*
鼠标开始的时候
*/
        function startHandler(evt){
                evt.preventDefault();
                starTime=new Date() * 1;
                startX=evt.touches[0].pageX;
                console.log(numMl+"star");
                oUi.css("margin-left","'+numMl+'px")
                
               
        }
/*
鼠标滑动的时候
*/
       function moveHandler(evt){
               evt.preventDefault();
               MoLiX=evt.targetTouches[0].clientX-startX;
               var $indexLi=$(this).index();   // 当前索引值
               var $index=$indexLi;
               oUi.css({
                       "marginLeft":(MoLiX+(-$index*warW))+"px",
                     })
        }
/*
鼠标离开的时候
*/
var $indexLi=1;
function endHandler(evt) {
    evt.preventDefault();
    var endTime = new Date() * 1;
    var con = warW / 6;
    var $indexLi = $(this).index();
    numMl = 0 + $indexLi * warW;    //记录偏移的量

    if (endTime - starTime > 500) {  //按时间的大小进行 执行滑动函数
        if (MoLiX < -con) {
            if ($indexLi == liLen-1) { //最后一张的时候不执行滑动函数
                goIndex($indexLi);
                return false;    //防止跳出浏览器
            } else {
                $indexLi++;
                goIndex($indexLi);
            }

        } else if (MoLiX > con) {
            if ($indexLi == 0) {
                goIndex(0);
                return false;
            } else {
                $indexLi--;
                goIndex($indexLi);
            }

        }

    } else {
        // 快速触发滑动
        if (MoLiX < -20) {
            if ($indexLi == liLen-1) {
                goIndex($indexLi);
                return false;
            } else {
                $indexLi++;
                goIndex($indexLi);
            }

        } else if (MoLiX > 20) {
            if ($indexLi == 0) {
                goIndex(0);
                return false;
            } else {
                $indexLi--;
                goIndex($indexLi);
            }

        }
    }

}
        
        
        
    /*
鼠标离开的时候执行的函数
*/

      function goIndex($indexLi){
           oUi.animate({
               "marginLeft":(-$indexLi*warW)+"px",
               },260)


        }
    
        
        
/*
函数绑定
*/
for( var i=0; i<liLen;i++){
    oLi[i].addEventListener('touchstart', startHandler); // 当前 手指的位移
    oLi[i].addEventListener('touchmove', moveHandler); // 当前 手指的位移
    oLi[i].addEventListener('touchend', endHandler); // 当前 手指的位移
    
    

}



</script>

  源码下载。请到文件下载里面 的   demo1.rar

posted @ 2015-07-22 11:28  328201736  阅读(311)  评论(0)    收藏  举报