<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<style>
img{border:0px; cursor:pointer;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var $mouseX = 0; //鼠标X轴坐标
var $scrollLeft = 0; //滑动位置标记
var $width = 0;
//初始化
(function init(){
$("#play_list").scrollLeft($scrollLeft); //回到第一帧
$("#play_list a").click(function(){return false;}) //取消所有click
})();
//开始工作，记录鼠标位置
$("#play_list img").mousedown(function(e){$mouseX = e.pageX;return false; });
$("#play_list img").mouseup(function(e){
if($mouseX > 0){
var $move = $mouseX-e.pageX;//滑动偏移量
//点击处理
if($move==0){
window.location = $(this).parent().attr("href");
return false;
}
$mouseX = 0;$width = 0; //还原设置值
$(this).parent().prevAll().each(function() {$width += $(this).width(); }); //前面元素宽度累加
$scrollLeft = $width+$(this).width() * (($move > 0)?1:-1); //1为向左滑动 -1这向右滑动
$("#play_list").animate({ scrollLeft: $scrollLeft },500); //设置滑动位置及动画效果
}
return false;
});
//图片跟随鼠标滑动
$("#play_list img").mousemove(function(e){
if($mouseX > 0){
var $move = $scrollLeft + $mouseX-e.pageX;
$("#play_list").scrollLeft($move);
}
return false;
});
});
</script>
</head>
<body>
<div id="play_list" style="overflow:hidden; 341px; height:191px; white-space:nowrap;">
<a href="http://koyoz.com/1.jpg">
<img src="http://www.koyoz.com/demo/html/autoplay_xunlei/imgs/1.jpg" alt="相恋9年尔冬升再婚娶相恋9年女友" />
</a>
<a href="http://koyoz.com/2.jpg">
<img src="http://www.koyoz.com/demo/html/autoplay_xunlei/imgs/2.jpg" alt="恋情变贤周海媚公开6年恋情变贤妇" />
</a>
<a href="http://koyoz.com/3.jpg">
<img src="http://www.koyoz.com/demo/html/autoplay_xunlei/imgs/3.jpg" alt="为啥这么“熊猫”阿宝为啥这么红？" />
</a>
<a href="http://koyoz.com/4.jpg">
<img src="http://www.koyoz.com/demo/html/autoplay_xunlei/imgs/4.jpg" alt="男友被捕安妮-海瑟薇前男友被捕" />
</a>
<a href="http://koyoz.com/5.jpg">
<img src="http://www.koyoz.com/demo/html/autoplay_xunlei/imgs/5.jpg" alt="开价一亿天后王菲“复出”开价一亿" />
</a>
<a href="http://koyoz.com/6.jpg">
<img src="http://www.koyoz.com/demo/html/autoplay_xunlei/imgs/6.jpg" alt="赞郑伊健阿Sa赞郑伊健“保存”得好" />
</a>
<a href="http://koyoz.com/7.jpg">
<img src="http://www.koyoz.com/demo/html/autoplay_xunlei/imgs/7.jpg" alt="死跑龙套北影演员：甘当‘死跑龙套的’" />
</a>
<a href="http://koyoz.com/8.jpg">
<img src="http://www.koyoz.com/demo/html/autoplay_xunlei/imgs/8.jpg" alt="潘玮柏死潘玮柏死盯辣妹脱衣解带" />
</a>
<a href="http://koyoz.com/9.jpg">
<img src="http://www.koyoz.com/demo/html/autoplay_xunlei/imgs/9.jpg" alt="张曼玉分尔冬升深爱张曼玉分手发呆" />
</a>
</div>
</body>
</html>
