1 <html>
2 <head>
3 <title>1</title>
4 <style type='text/css'>
5 img{
6 border-width:0px;
7 }
8 #waiting{
9 }
10 #picture{
11 display:none;
12 }
13 #photo_div{
14 margin:0px auto;
15 padding-top:200px;
16 border:solid 0px green;
17 text-align:center;
18 }
19 </style>
20 </head>
21 <body>
22 <div id="photo_div">
23 <img src='pic/loading.gif' id='waiting'/>
24 <img src='pic/2.jpg' id='picture' onload="show();" onmousemove="cursor();" onclick="change();"/>
25 </div>
26 <script language='javascript'>
27 var img0=document.getElementById('waiting');
28 var img=document.getElementById('picture');
29 var photo_div=document.getElementById('photo_div');
30 var array=['1.jpg','2.jpg','3.jpg','4.jpg','j20.jpg','t-50.jpg'];//图片文件名依次录入
31 var index=1;//因为一开始是2.jpg，所以index=1
32 var flag='';
33 function show(){
34 img0.style.display='none';
35 img.style.display='block';
36 photo_div.style.paddingTop='40px';
37 if(flag=='left'){
38 if(index==0)
39 img.style.cursor='auto';
40 else
41 img.style.cursor='pic/pre.cur';
42 }else if(flag=='right'){
43 if(index==array.length-1)
44 img.style.cursor='auto';
45 else
46 img.style.cursor='pic/next.cur';
47 }
48 }
49 function cursor(){
50 var leftpart=img.offsetWidth/2;
51 if(event.offsetX<=leftpart){
52 if(index>0)
53 img.style.cursor='pic/pre.cur';/*注意不是url('pic/pre.cur')*/
54 else
55 img.style.cursor='auto';
56 }else{
57 if(index<array.length-1)
58 img.style.cursor='pic/next.cur';
59 else
60 img.style.cursor='auto';
61 }
62 //6-39.html
63 }
64 function change(){
65 var leftpart=img.offsetWidth/2;
66 if(event.offsetX<=leftpart){
67 if(index-1>=0){
68 img.style.display='none';
69 index--;
70 img.src='pic/'+array[index];
71 flag='left';
72 }
73 }else{
74 if(index+1<=array.length-1){
75 img.style.display='none';
76 index++;
77 img.src='pic/'+array[index];
78 flag='right';
79 }
80 }
81
82 }
83 </script>
84 </body>
85 </html>
