练习制作tab菜单
用到jQuery
HTML代码：
<!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" /><link href="style/basic.css" rel="stylesheet" type="text/css" media="all" /><script type="text/javascript" src="style/jquery-1.3.2.js"></script><script type="text/javascript"> (function(){ var imgnum=1; var changstart; function changimg(){ imgnum=(imgnum>5)? '1':imgnum; $('#tagview img').attr('src',function(){return 'img/tagview/img'+imgnum+'.gif';}); //alert($("#tagview img").attr('alt')); $("#tagview a").removeClass('here'); $("a:contains("+imgnum+")").addClass('here'); imgnum++; } changstart=setInterval(function(){changimg(imgnum);},2500); function aa(){ $('#tagview ul a').mouseover(function(){ //alert($('#tagview img')); $("#tagview a").removeClass('here'); $(this).addClass('here'); clearInterval(changstart); imgnum=$(this).text(); $('#tagview img').attr('src',function(){return 'img/tagview/img'+imgnum+'.gif';}); }); $('#tagview ul a').mouseout(function(){changstart=setInterval(function(){changimg(imgnum);},2500);}); } window.onload= aa; })()</script><link href="style/home.css" rel="stylesheet" type="text/css" /></head><body> <div id="tagview"> <a href="#"><img alt='图片展示'/></a> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> </ul> </div></body></html>?
css代码为：
@charset "utf-8";/* CSS Document */#tagview{position:relative;margin-top:10px;width:376px;height:186px;}#tagview img{z-index:10;width:370px;height:180px;padding:0;margin:0;}#tagview ul{position:absolute;right:0;bottom:0;list-style:none;padding:10px 10px;margin:0;z-index:20;}#tagview li{float:left;}#tagview ul a{color:#FFF;display:block;text-decoration:none;margin:3px;width:17px;height:17px;text-align:center;background-color:#5c5f63;}#tagview ul a.here{background-color:#d39635;border:#FFF 1px solid;width:15px;height:15px;}#tagview ul a:hover{background-color:#d39635;border:#FFF 1px solid;width:15px;height:15px;}?
运行效果：
http://www.everbeing.cn/
问题总结：
1.在<script>标签中写js代码时要把过程包装成function函数，然后把函数传递给window.onload(传的是函数名，不带
?? 括号的)，不然，jQuery的$（）取值为空;
2.setInterval()函数里面的执行函数传递的是函数名，如果要带参数，要包装到function(){}匿名函数里
?