<!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- 100%;
max-height: 100%;
}
/* 隐藏画布外的内容 */
#canvas {
height: 100%;
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