js实现幻灯片轮播原理

1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2.  
3. <html>
4.  
5. <head>
6. <meta http-equiv="Content-Type"content="text/html; charset=UTF-8">
7. <title>Insert title here</title>
8. </head>
9. <script type="text/javascript">
10. var timeID;
11. var image;
12. var current= 0;
13. var images= new Array(5);
14. function init(){
15. for(var i=1;i<=5;i++){
16. images[i]= new Image(450,550);
17. images[i].src= "pictures/"+i+".jpg";
18. }
19. image = document.images[0];
20. }
21. function setSrc(i){
22. current = i;
23. //设置图片src的属性，实现图片的切换
24. image.src= images[i].src;
25. }
26. function pre(){
27. if(current<=0){
28. alert('已经是第一张了');
29. }else{
30. current--;
31. setSrc(current);
32. }
33. }
34. function next(){
35. if(current>=5){
36. alert('已经是最后一张了');
37. }else{
38. current++;
39. setSrc(current);
40. }
41. }
42. function play(){
43. if(current>=5){
44. current =0;
45. }
46. setSrc(++current);
47. }
48. </script>
49. <body onload="init()">
50. <input type="button"value="第一张"onclick="setSrc(1)">
51. <input type="button"value="上一张"onclick="pre()">
52. <input type="button"value="下一张"onclick="next()">
53. <input type="button"value="最后一张"onclick="setSrc(5)">
54. <input type="button"value="幻灯播放"onclick="timeID=setInterval('play()',500)">
55. <input type="button"value="停止播放"onclick="clearInterval(timeID)">
56. <div style="border:1px solid blue;width:450px; height:550px;"id="myPic">
57. <imgsrc="pictures/1.jpg"/>
58. </div>
59. </body>
60. </html>
61. 首先init()函数用于初始化images数组和image的值，本例中主要是利用setSrc()设置图片的src属性值，这样就达到了图片的切换，图片的轮播是使用定时器来时显的！setInterval('play()',500)的意思是每0.5s调用一次play()函数！
62. 转载链接http://www.phpddt.com/dhtml/238.html