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

最新推荐文章于 2020-10-27 16:45:26 发布

香柠檬YU

最新推荐文章于 2020-10-27 16:45:26 发布

阅读量4.2k

点赞数

分类专栏： jQuery 文章标签： jquery hover animate 函数图片

本文链接：https://blog.csdn.net/sinat_36841379/article/details/60333736

版权

jQuery 专栏收录该内容

30 篇文章 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>