码迷,mamicode.com
首页 > Web开发 > 详细

非常简单的js切换效果(具有举一反三效果)

时间:2015-01-27 12:54:02      阅读:165      评论:0      收藏:0      [点我收藏+]

标签:

今天无意中在网上发现的,代码非常的简单,一看就明白的js图片切换效果代码,喜欢简洁的朋友可以参考一下。

html:

1 <img src="a1.jpg" width="478" height="286" id="showpic" />

图片可以自己设置的,下面我们来看下切换脚本,利用数组把图片装起来。

 1 <script type="text/javascript">
 2 window.onload = function(){    
 3     var curIndex = 0;
 4     var timerInterval = 2000; //时间间隔  单位毫秒
 5     var arr = new Array();
 6     arr[0] = "a1.jpg";
 7     arr[1] = "a2.jpg";
 8     arr[2] = "a3.jpg";
 9     arr[3] = "a4.jpg";
10     arr[4] = "a5.jpg";
11     arr[5] = "a6.jpg";
12     arr[6] = "a6.jpg";
13     setInterval(changeImg,timerInterval);
14     function changeImg(){
15         var obj = document.getElementById(showpic);
16         if(curIndex == arr.length - 1){
17             curIndex = 0;
18         }else{
19             curIndex += 1;
20         }
21         obj.src = arr[curIndex];
22     }
23 }
24 </script>    

这段代码,简单但很巧妙。

经过测试,完全可以实现自动切换。

 

非常简单的js切换效果(具有举一反三效果)

标签:

原文地址:http://www.cnblogs.com/hl-520/p/4252303.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!