如何实现图片轮播的效果 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style type="text/css">
 7             div{
 8                 width: 900px;
 9                 height: 400px;
10                 margin: 0 auto;
11             }
12             div img{
13                 width: 900px;
14                 height: 400px;
15             }
16         </style>
17         <script type="text/javascript">
18             function init(){
19             //隔两秒调用一次
20             //  window.setTimeout(changeImg,2000);
21             //每隔两秒调用一次
22                 setInterval(changeImg,2000);
23             }
24            //数组中的图片要单独在项目中创建一个文件夹用于存放   
25             var pathArr=new Array(
26                 "img/1.jpg",
27                 "img/1.png",
28                 "img/2.jpg",
29                 "img/2.png"
30             );
31             var index = 0;
32             function changeImg(){
33                 nextImg();
34             }
35             function preImg(){
36                 myimg = document.getElementById("myimg");
37                 index --;
38                 if(index<0){
39                     index = pathArr.length-1;
40                 }
41                 myimg.src = pathArr[index];
42             }
43             function nextImg(){
44                 myimg = document.getElementById("myimg");
45                 index ++;
46                 if(index>=pathArr.length){
47                     index = 0;
48                 }
49                 myimg.src = pathArr[index];
50             }
51         </script>
52     </head>
53     <body onload="init()">
54         <p align="center">
55         <button onclick="preImg()">上一张</button>
56         <button onclick="nextImg()">下一张</button>
57         </p>
58         <div>
59             <img src="img/1.png" id="myimg" />
60         </div>
61     </body>
62 </html>

 

posted @ 2020-07-31 14:40  Hello小码  阅读(483)  评论(0)    收藏  举报