图片水平滚动，当鼠标悬停的时候暂停滚动

淩亂°似流年 2022-07-16 18:19 71阅读 0赞

图片会水平移动，但是当图片在鼠标悬停的时候在任意一幅画的时候，暂停水平移动，当鼠标从图片上移动的时候再继续移动。

<!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>无标题文档</title>  
<script type="text/javascript" src="jquery-2.1.3.js"></script>  
<script language="javascript">  
$(document).ready(function()\{  
    var $wrapper=$("\#scroller a img");/\*这里我们获得的引用是单独图片的引用，而不是整个图片整体的引用，                                       如果是整体的引用的话，动的将会是整个区域都在动，是width:460px，                                       height：150px，区域的水平移动。而且该区域中只显示大概三张图，其                                       他图都不予以显示的。\*/  
$wrapper.css(\{"left":"0px"\});  
var animator=function(imgblock)\{  
imgblock.animate(  
\{"left":"-770px"\},20000,  
function()\{  
imgblock.css(\{"left":"450px"\});  
animator($(this));  
\}  
);  
\}  
animator($wrapper);  
  
$wrapper.hover(  /\*这里我们使用hover()函数，其中包含有两个函数，一个是鼠标悬停的时候，触发的时                            间，另一个是鼠标移开的时候，触发的事件。总的来说其实就是当鼠标悬停的时候，                            应用stop()的方法；当鼠标一开的时候，再次调用animator()的方法，一直循环下                              去。\*/  
function()\{  
$wrapper.stop();  
\},  
function()\{  
animator($wrapper);  
\}  
  
);  
  
\});  
</script>  
<style>  
\#scroller\{  
position:relative;  
height:150px;  
width:460px;  
overflow:hidden;  
margin:auto;  
\}  
.images\{  
width:800px;  
\}  
\#scroller a img\{  
border:0px;  
position:relative;  
margin-left:10px;  
\}  
</style>  
</head>  
<body>  
<div id="scroller">  
<div class="images">  
<a href="\#"><img src="1.jpg" width="150px" height="150px"/></a>  
<a href="\#"><img src="2.jpg"width="150px" height="150px" /></a>  
<a href="\#"><img src="4.jpg"  width="150px" height="150px"/></a>  
<a href="\#"><img src="3.jpg" width="150px" height="150px" /></a>  
<a href="\#"><img src="25.jpg" width="150px" height="150px" /></a>  
</div>  
</div>  
</body>  
</html>