html页面往往会有图片自动切换的版块，如：
当鼠标放在了数字上的时候，会显示对应的图片，并且给数字加背景色。
对于这个小功能，用javascript实现很简单。
两步即可实现:
1.写基本布局
css样式： 1 <style type = "text/css"> 2 #main{ 3 width:500px; 4 height:500px; 5 margin:50px; 6 background-image:url(1.jpg); 7 border:1px solid red; 8 } 9 #bar{ 10 position:absolute; 11 top:510px; 12 left:390px; 13 } 14 li{ 15 float:right; 16 width:30px; 17 text-align:left; 18 list-style-type:none; 19 background-color:#B3C5D2; 20 } 21 </style>
body中布局
1 <body> 2 <div id = "main"> 3 <img name = "pic" src ="1.jpg" width="500" height="500"> 4 </div> 5 <div id = "bar"> 6 <ul> 7 <li onmouseout ="ChangeView2('4.jpg')" onmouseover="ChangeView('4.jpg')" id ="4.jpg">| 4</li> 8 <li onmouseout ="ChangeView2('3.jpg')" onmouseover="ChangeView('3.jpg')" id ="3.jpg">| 3</li> 9 <li onmouseout ="ChangeView2('2.jpg')" onmouseover="ChangeView('2.jpg')" id ="2.jpg">| 2</li> 10 <li onmouseout ="ChangeView2('1.jpg')" onmouseover="ChangeView('1.jpg')" id ="1.jpg">| 1</li> 11 </ul> 12 </div> 13 </body>
2.写js
1 <script type = "text/javascript"> 2 function ChangeView(id){ 3 var li = document.getElementById(id); 4 li.style.backgroundColor="red"; 5 document.images[0].src=id; 6 } 7 function ChangeView2(id){ 8 var li = document.getElementById(id); 9 li.style.backgroundColor="#B3C5D2"; 10 } 11 </script>
上面的几步就能实现图片的切换了，前提是在本html文件同级目录下有四张图片名称为：X.jpg
关于自动切换，可以设置一个定时器setInterval()即可。
另：也可以通过<a>标签的a:hover{background-color:red}来实现背景色变化，可省略onmouseout事件。