写了一个横向切换的效果，开始效果是好的，但是在页面长时间不做任何操作的情况下，图片切换顺序乱了...
0
悬赏园豆：20
[待解决问题]
我是 初学者，自己写了一个横向切换的效果，开始还好好的，可是在我去浏览其他页面，图片开始滚动的顺序乱了，切换的频率也加快了。。。当我再次点击 小下标（1.2.3.4） 的时候，又恢复了原来的状况，请问这是为什么呢？麻烦帮我看看是不是代码逻辑顺序有问题， 代码如下：
<!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>
<style type="text/css">
body, div { margin: 0; paading: 0; font-size: 12px; }
ul, li { margin: 0; padding: 0; list-style: none; }
.box { position: relative; width: 960px; margin: 0 auto; padding-top: 15px; }
.b-list { position: relative; overflow: hidden; width: 600px; height: 520px; }
.list { position: absolute; overflow: hidden; height: 520px; }
.list li{ float:left; display: inline; width:600px; height: 520px; }
.list li img { width:600px; height: 520px; border-radius: 5px; cursor: pointer;}
.btn { position: absolute; bottom: 0; width: 600px; height: 26px; background: #000; line-height: 26px; opacity: 0.8; filter: alpha(opacity=80); text-align: right; }
.btn a { padding: 2px 5px; margin: 0 2px; border: 1px solid #fff; border-radius: 2px; background: #000; color: #fff; text-decoration: none; cursor: pointer; }
.btn .over { background: #f00; }
</style>
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript">
//图片左右滚动，原理：设置绝对位置，根据不同的位置坐标显示不同的图片，用到jquery特效的方法：$().animate() 执行一个CSS属性设置的自定义动画。
$(document).ready(function (){
var liObj = $(".list li");
var imgWidth = $(".list li").width();
var imgSum = $(".list img").size();
var imgrellW = imgWidth * imgSum;
var index = 0;
var setTime = null;
$(".list").css({"width": imgrellW});
var timdId = window.setInterval(start,2000);
// 自动播放
function start() {
$(".btn a").removeClass("over");
$(".btn a").eq(index).addClass("over");
var img_position = index * imgWidth;
$(".list").animate({"left": -img_position}, 500);
index++;
if(index >= imgSum) {
index = 0;
}
}
// 鼠标点击时 显示对应的图片
$(".btn a").click(function() {
$(".btn a").removeClass("over");
$(this).addClass("over");
var id = $(this).attr("rel") - 1;
var img_position = id * imgWidth;
$(".list").animate({"left": -img_position}, 200); //animate 动画的用法。后面的参数 更高的值表示更慢的动画.
index = id; //记录点击当前的索引。点击过后，继续下一个循环。。。
});
pause(".list li img"); // 鼠标移到图片上 停止滚动
function pause(obj) {
$(obj).hover(
function() { clearInterval(timdId);},
function() {
timdId = window.setInterval(start,2000);
}
);
}
});
</script>
</head>
<body>
<div class="box" id="box">
<div class="b-list">
<ul class="list">
<li><img src="images/p1.jpg"/></li>
<li><img src="images/p2.jpg"/></li>
<li><img src="images/p3.jpg"/></li>
<li><img src="images/p4.jpg"/></li>
</ul>
</div>
<div class="btn" id="btn">
<a href="javascript:void(0)" class="over" rel="1">1</a><a href="javascript:void(0)" rel="2">2</a><a href="javascript:void(0)" rel="3">3</a><a href="javascript:void(0)"rel="4">4</a>
</div>
</div>
</body>
</html>
