首页 新闻 搜索 专区 学院

写了一个横向切换的效果,开始效果是好的,但是在页面长时间不做任何操作的情况下,图片切换顺序乱了...

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>

limanclear的主页 limanclear | 菜鸟二级 | 园豆:262
提问于:2011-08-23 17:21
< >
分享
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册