如题，我们将实现这一效果。

首先是html5的部分：

<!DOCTYPEhtml><html><head><title></title><metacharset="utf-8"><linkrel="stylesheet"type="text/css"href="CSS/CarouselFigure.css"><scripttype="text/javascript"src="js/CarouselFigure.js"></script></head><body><divid="figure_div"><imgid="img"src="p_w_picpaths/2.jpg"><divid="dots_div"><liid="dot1"onmouseover="myChangePicture(1)"></li><liid="dot2"onmouseover="myChangePicture(2)"></li><liid="dot3"onmouseover="myChangePicture(3)"></li><liid="dot4"onmouseover="myChangePicture(4)"></li></div></div></body></html>

然后我们写一个简单的CSS，使得hover时改变圆点的背景颜色。

*{margin:0px;padding:0px;}div#figure_div{position:relative;width:800px;height:500px;}div#dots_div{position:absolute;/*width:100px;*/height:20px;left:352px;bottom:10px;}div#figure_divli{width:16px;height:16px;border:1pxsolid#666;display:inline-block;border-radius:8px;}div#figure_divli:hover{background-color:#EAEA06;}div#figure_divimg{width:800px;height:500px;float:left;}

然后就是js的部分了，我们用js实现自动播放和鼠标划过li时切换图片。

varnow_number;functionmyChangePicture(picture_number){switch(picture_number){case1:document.getElementById("img").src="p_w_picpaths/2.jpg";now_number=1;document.getElementById("dot1").style.backgroundColor='#EAEA06';document.getElementById("dot2").style.backgroundColor='';document.getElementById("dot3").style.backgroundColor='';document.getElementById("dot4").style.backgroundColor='';break;case2:document.getElementById("img").src="p_w_picpaths/3.jpg";now_number=2;document.getElementById("dot2").style.backgroundColor='#EAEA06';document.getElementById("dot1").style.backgroundColor='';document.getElementById("dot3").style.backgroundColor='';document.getElementById("dot4").style.backgroundColor='';break;case3:document.getElementById("img").src="p_w_picpaths/cy.jpg";now_number=3;document.getElementById("dot3").style.backgroundColor='#EAEA06';document.getElementById("dot1").style.backgroundColor='';document.getElementById("dot2").style.backgroundColor='';document.getElementById("dot4").style.backgroundColor='';break;case4:document.getElementById("img").src="p_w_picpaths/zjnxz.jpg";now_number=4;document.getElementById("dot4").style.backgroundColor='#EAEA06';document.getElementById("dot1").style.backgroundColor='';document.getElementById("dot2").style.backgroundColor='';document.getElementById("dot3").style.backgroundColor='';break;}}functionmyChangePictureAuto(){now_number++;if(now_number==5){now_number=1;}myChangePicture(now_number);setTimeout("myChangePictureAuto()",3000);}window.onload=function(){now_number=0;myChangePictureAuto();}


附件：http://down.51cto.com/data/2368049