<!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; width: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>