jquery 动画的问题 [复制链接]

tza17313　楼主

高级会员 

帖子: 175
体力: 732
威望: 0
居住地: 浙江省杭州市

发表于 2011-5-27 14:52:52 |显示全部楼层

需要按ctrl+f5

<!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 src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>

<style type="text/css">
@charset "utf-8";
* {
	margin:0;
	padding:0;
}
img { border:none; }
a {
	text-decoration:none;
	color:#fff;
}
a:hover { color:#A76E18; }
ul li, ol li { list-style:none; }
h2 {
	font-size:16px;
	font-weight:bold;
}
.clear { clear:both; }
body {
	font-family:"微软雅黑";
	font-size:12px;
	color:#fff;
	margin:0 auto;
	padding:0 0px;
	background:url(images/bg1.gif);
}
.inline { display:inline; }
.of_hidden { overflow:hidden; }
.f_l { float:left; }
.f_r { float:right; }
.center { margin:0 auto; }
#outer {
	margin-top:50px;
	width:700px;
	height:296px;
}
#slide_img {
	float:left;
	width:450px;
	height:296px;
	overflow:hidden;
	position:relative;
}
#slide_img ul li{height:296px;}
#slide_word {
	float:left;
	height: 296px;
	width: 250px;
	background:#EF9524;
	position:relative;
	overflow:hidden;
}
.num {
	position:absolute;
	top:5px;
	right:10px;
}
.num li {
	float:left;
	padding:0 5px;
	line-height:18px;
	font-size:16px;
	font-weight:bold;
}
.num li a.on{ color:#A76E18;}
#slide_word span{ position:absolute; width:200px; height:100px; top:100px; left:25px; display:block;text-align:center;}
#slide_word span a{ font-size:36px; line-height:100px; font-weight:bold;}
#slide_word span a:hover{ color:#CCC;}
.slide{ position:absolute;}
</style>
<script type="text/javascript">
$(function(){			//幻灯片开始
		var title=$("#slide_word span").text();
		var num=$(".num>li");
		var len=num.length;
		var index=0;
		var showTimer;
		num.click(function(){
				index=$(".num li").index(this);
					showImg(index);
					swapTitle(index);
			}).eq(0).click();	 
		$("#slide_img").hover(function(){
				clearInterval(showTimer);
		},function(){
			showTimer = setInterval(function(){
					showImg(index);
					swapTitle(index);
					index++;
					if(index==len){index=0;}
				},4000);	
		}).trigger("mouseleave");
	});
	function swapTitle(index){
		var pic_tt=$(".slide li").eq(index).children("a").text();
		$("#slide_word span").html("<a href='#'>"+pic_tt+"</a>");
		if( !$("#slide_word span").is(":animated") ) {
		$("#slide_word span").animate({left:"0px"},200)
							.animate({left:"250px"},200)
							.animate({left:"0px"},200)
							.animate({left:"25px"},200)};
	}
	function showImg(index){
			var imgHeight=$("#slide_img .slide li").height();
			if( !$(".slide").is(":animated") ) {
			$(".slide").stop(true,true).fadeOut(1000)
									.animate({top:-imgHeight*index},0)
									.fadeIn(1000)
									};
			$(".num li a").removeClass("on").eq(index).addClass("on");
		}		//幻灯片结束
</script>
</head>

提示：您可以先修改部分代码再运行

刚学jquery不久看着教材的代码自己改的  还有几个问题不知道怎么解决，  求助各位高手啦
主要问题有两个：
      1.刚打开页面我是让它默认从第一副图开始但有点问题，第一幅会显示两次。除了这个自动播放基本没问题了；
      2.点击右上的数字多了之后  动画会显示两次了  ；
懂的高手帮忙解决下