<!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>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
/*拖拽用到的3个主要函数
onmousedown : 选择元素 onmousedown 事件会在鼠标按键被按下时发生。
onmousemove : 移动元素 onmousemove 属性在鼠标指针移动到元素上时触发。
onmouseup : 释放元素 onmouseup 属性在松开鼠标按钮时触发。
*/
window.onload = function ()
{
var x = 0 ;//拖着走的虚拟数字
var imgD = document.getElementById("img1");
var imgList = document.getElementsByTagName("img");//取得页面所有的img标签
var lastImg = imgD;//上一张显示的图片
var speed = 0;
var speedX = 0;
var timer = null;//定时器
var i = 0;
for (i=1;i<77;i++)
{
(function (oNewImg){
var imgD=new Image();
imgD.onload=function ()
{
oNewImg.src=this.src;
};
imgD.src='img/miaov ('+i+').jpg';
oNewImg.style.display='none';
document.body.appendChild(oNewImg);
})(document.createElement('img'));
}
//不是拖着一个物体再走，所以要用document,document其实是整个页面。
document.onmousedown = function (ev)
{
/* 处理浏览器兼容的，ie和其他内核浏览器处理方式不一样：一个用 ev 一个用 event,
event是事件对象(也是window的属性)，但不是标准的，只有IE支持。
像火狐就不能识别，如果直接在火狐中用event，会报错，导致后面的js无法进行下去；
在FireFox浏览器中，事件绑定的函数要获取到事件本身，需要从函数中传入，而IE等浏览器则可以直接使用event或者window.event得到事件本身。*/
var oEvent = ev || event;
var disX = oEvent.clientX - x;//鼠标的位置和点位置的一个差值
clearInterval(timer);
document.onmousemove = function(ev)
{
var oEvent = ev || event;
x = oEvent.clientX - disX;
//imgD.src ="img/miaov ("+ temp +").jpg";//动态改变图片
move();
speed = x-speedX;
speedX = x;
return false;//为了去除鼠标移动时候选中图片
};
document.onmouseup = function()
{
document.onmousemove = null;
document.onmouseup = null;
timer = setInterval(function(){
x += speed;//定义速度
move();
},30);
};
function move()
{
if(speed >0){
speed--;
}else{
speed++;
}
if(speed == 0){
clearInterval(timer);//关掉定时器
}
var temp = parseInt(-x/10);//-x是为了和鼠标左右同步，不加-号，向左移动就会向右转。加parseInt和/10是为了旋转流畅。x/10表示没拖10个像素走一个图
if(temp > 0){
temp = temp%77;
}else{
temp = temp+-Math.floor(temp/77)*77;
}
document.title=temp;
if(lastImg != imgList[temp]){
lastImg.style.display="none";
imgList[temp].style.display="block";
lastImg = imgList[temp];
}
}
return false;
};
}
</script>
<body>
<img id="img1" src="img/miaov (0).jpg"/>
</body>
</html>
css样式
body {margin:0;}
img {640px; height:378px; position:absolute; left:50%; top:50%; margin-top:-189px; margin-left:-320px;}