用到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.οnlοad= 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;}
运行效果:
问题总结:
1.在<script>标签中写js代码时要把过程包装成function函数,然后把函数传递给window.onload(传的是函数名,不带
括号的),不然,jQuery的$()取值为空;
2.setInterval()函数里面的执行函数传递的是函数名,如果要带参数,要包装到function(){}匿名函数里