html+js图片切换示例

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事件。