<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery图片拖动切换效果手机wap网站图片特效-懒人模板【http://www.lanrenmb.com/yidongyunying/shoujijianzhan/】</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="perfectDrag.js"></script>
<script type="text/javascript" src="../../inc/jquery.js"></script>
<script type="text/javascript">
var oTimer=null;
var iSpeed=0;
var iNow=0;
window.onload=function ()
{
var oUl=document.getElementById('wrap').getElementsByTagName('ul')[0];
var iStartX;
new MiaovPerfectDrag
(
oUl,
function ()
{
return {x:oUl.offsetLeft, y:oUl.offsetTop};
},
function (x, y)
{
oUl.style.left=x+'px';
//oUl.style.top=y+'px';
},
function ()
{
stopMove();
iStartX=oUl.offsetLeft;
},
function () //当拖拽结束
{
if(Math.abs(oUl.offsetLeft-iStartX)>=50)
{
if(oUl.offsetLeft>iStartX)
{
iNow--;
if(iNow<0)
{
iNow=0;
}
}
else
{
iNow++;
if(iNow>=oUl.getElementsByTagName('li').length)
{
iNow=oUl.getElementsByTagName('li').length-1;
}
}
}
startMove(-iNow*oUl.getElementsByTagName('li')[0].offsetWidth);
}
);
};
function startMove(iTarget)
{
if(oTimer)
{
clearInterval(oTimer);
}
oTimer=setInterval("doMove("+iTarget+")", 30);
}
function doMove(iTarget)
{
var oUl=document.getElementById('wrap').getElementsByTagName('ul')[0];
var l=oUl.offsetLeft;
iSpeed+=(iTarget-oUl.offsetLeft)/5;
iSpeed*=0.7;
l+=iSpeed;
if(Math.abs(iTarget-oUl.offsetLeft)<1 && Math.abs(iSpeed)<1)
{
clearInterval(oTimer);
oTimer=null;
l=iTarget;
}
oUl.style.left=l+'px';
}
function stopMove()
{
if(oTimer)
{
clearInterval(oTimer);
}
}
</script>
</head>
<body>
<div id="iphone">
<!--loop photo start--> <div id="wrap">
<ul>
<li style="background: url(images/01.jpg)" title="Sunlife阳光妈妈">
</li>
<li style="background: url(images/02.jpg)" title="Sunlife阳光妈妈">
</li>
<li style="background: url(images/03.jpg)" title="Sunlife阳光妈妈">
</li>
<li style="background: url(images/04.jpg)" title="Sunlife阳光妈妈">
</li>
<li style="background: url(images/05.jpg)" title="Sunlife阳光妈妈">
</li>
</ul>
</div>
</div>
<p align="center">来源：网络 代码整理：<a href="http://www.lanrenmb.com/yidongyunying/shoujijianzhan/" target="_blank">懒人模板</a></p>
<p align="center">* 尊重他人劳动成果，转载请自觉注明出处！注：此代码仅供学习交流，请勿用于商业用途。</p>
</body>
</html>
jquery图片拖动切换效果手机wap网站图片特效.zip
86 浏览量
2024-05-02
21:06:03
上传
评论
收藏 608KB ZIP 举报
jquery图片拖动切换效果手机wap网站图片特效.zip （14个子文件） 
jquery图片拖动切换效果手机wap网站图片特效 inc 
jquery.js 70KB preview-376 default.htm 2KB down js_367 style.css 430B default.htm 3KB perfectDrag.js 3KB
bg.png 36KB images 
02.jpg 95KB 01.jpg 117KB 05.jpg 109KB 04.jpg 109KB 03.jpg 146KB images 
close.gif 111B logo.png 19KB vcss.css 2KB资源评论
