jquery 图片无缝滚动问题

在网上找了一个 图片滚动源码,结果实现不了无缝滚动,我是菜鸟 求大神指点。代码如下:

<!DOCTYPE html>
<head id="Head1" runat="server">
<title>图片滚动</title>
<script src="Scripts/jquery-1.8.2.js" type="text/javascript"></script>
<script src="Scripts/JMetro.js" type="text/javascript"></script>
<style type="text/css">
.metro {
overflow: hidden;
height: 280px;
width: 280px;
margin: 25px;
float: left;
background-color: #CC0000;
}
</style>
</head>
<body>

<h1>有缝处已标记为红色</h1>
<div class="metroCont">

<div class="metro">
<div>
<img width="280px" height="280px" src="img/33.jpg" />
<img width="280px" height="280px" src="img/22.jpg" />
</div>

<script type="text/javascript">

$(".metroCont").jMetroRun(2000, 2000, 280, 1000, 1000);
</script>
</body>
</html>
附上Js & Img
链接: http://pan.baidu.com/s/1mgxduo4 密码: acjt

  思路:
  点击左边--
  1.将第一个LI向左滑动,滑动的数值就是LI的宽度。(这里是用负margin-left来实现移动。)
  2.滑动完成后,将这个LI插入到整个LI的最后一个(实现无缝滚动)
  点击右边--
  1.将最后一个LI插入到所有LI的第一个,并将其定位到可见区域之外,(这里用的是margin)
  2.再将其滑动到可见区域。
注意:这里的IF判断语句,是为了防止连续点击“左”或“右”的铵钮,而出现的BUG;
  这判断的意思:只有当LI不处于动画状态时,才执行移动函数。只要处于动画状态,点击时,任何事都不发生。
温馨提示:答案为网友推荐,仅供参考
相似回答