js实现简单的图片轮播

Posted 纸飞机的梦想

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js实现简单的图片轮播相关的知识,希望对你有一定的参考价值。

js代码如下

 1 <script type="text/javascript">
 2 var n=1;
 3 var map=new Array();
 4 map[0]=new Image();
 5 map[1]=new Image();
 6 map[2]=new Image();
 7 map[3]=new Image();
 8 map[4]=new Image();
 9 map[5]=new Image();
10 map[0].src="images/0.jpg";
11 map[1].src="images/1.jpg";
12 map[2].src="images/2.jpg";
13 map[3].src="images/3.jpg";
14 map[4].src="images/4.jpg";
15 map[5].src="images/5.jpg";
16 function disp()
17 {
18 document.getElementById("img1").src=map[n].src;
19 n=n+1;
20 if (n>5)
21 n=0;
22 window.setTimeout("disp();",2000);
23 }
24 window.setTimeout("disp();",2000);
25 </script>

自己替换掉图片地址和名称,以及切换时间。2000表示2秒 。

 

然后在<body>和</body>中间加上下面一段代码。

1 <div id="content1">
2 <img id="img1" src="images/0.jpg" width="100%" height="300px">
3 </div>

 

以上是关于js实现简单的图片轮播的主要内容,如果未能解决你的问题,请参考以下文章

简单的图片轮播效果

js如何制作图片轮播

js实现效果:循环轮播图

js如何实现新闻轮播

怎么用js实现图片的缩小?

分别用css3JS实现图片简单的无缝轮播功效