HTML代码：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>无标题文档</title>
 6 <style type="text/css">
 7 *{
 8     margin:0px;
 9     padding:0px;
10     font-family:"微软雅黑";}
11 
12     
13 #tuijian{
14     width:940px;
15     height:500px;
16     background-repeat:no-repeat;
17     margin:auto;
18     }
19 .pages{
20     line-height:500px;
21     background-color:#000;
22     background-position:center;
23     background-repeat:no-repeat;
24     opacity:0.4;
25     width:30px;
26     height:60px;
27     }
28 #p1 {
29     background-image:url(1.jpg);
30     float:left;
31     margin:180px 0px 0px 10px;}        /*上 右 下 左*/
32 #p2{
33     background-image:url(2.jpg);
34     float:right;
35     margin:180px 10px 0px 0px;}
36     
37 </style>
38 </head>
39 
40 <body>
41 
42 <div id="tuijian" style="background-image:url(9.jpg)">
43 <div class="pages" id="p1" onclick="dodo(-1)"></div>
44 <div class="pages" id="p2" onclick="dodo(1)"></div>
45 
46 
47 </div>
48 
49 </body>
50 </html>
51 <script type="text/javascript">
52 var jpg=new Array();
53 jpg[0]="url(9.jpg)";
54 jpg[1]="url(11.jpg)";
55 jpg[2]="url(20.jpg)";
56 var tjimg=document.getElementById("tuijian");
57 var xb=0;
58 var n=0;
59 function huan()
60 {
61     xb++;
62     if(xb==jpg.length)
63     {
64         xb=0;        
65     }
66         
67         tjimg.style.backgroundImage=jpg[xb];
68         if(n==0)
69         {
70             window.setTimeout("huan()",2000);
71         }
72 }
73 function dodo(m)
74 {
75       n=1;
76       xb=xb+m;
77       if(xb<0)
78       {
79           xb=jpg.length-1;
80       }
81           else if(xb>=jpg.length)
82           {
83               xb=0;
84           }
85     tjimg.style.backgroundImage=jpg[xb];
86 }
87 window.setTimeout("huan()",2000);
88 </script>

效果为：