用到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(){}匿名函数里
?