Day19-使用单个img标签做轮播效果

Day19-使用单个img标签做轮播效果

---

使img标签不断显示和隐藏来实现轮播图效果。

---

1.HTML界面

<div>
	<img src="../images/a1.jpg" width="160" height="160" />
</div>

2.JavaScript

记得导入JQuery文件。

var i = 1;
var Time;
var img = new Array("a1.jpg","a2.jpg","a3.jpg","a4.jpg","a5.jpg");
function Run(){
   
	Time = setInterval(function(){
   
	  $("img").hide();
	  $("img").attr({
   src:"../images/"+img[i]});
	  $("img").show();
	  i++;
	  if(i > 4){
   
		  i = 0;	
	  }
  },1000);
}

声明全局变量i，初始化为1。因为第0张是显示的，下一张替换为第一张，故初始化1.
声明Time变量记录定时器，
声明img数组，保存替换图片的名称。
Run()函数详解：

1.创建定时器，并在中间定义一个匿名函数。1000ms执行一次。
2.把当前图片给隐藏。
3.替换图片路径。
4.再把图片显示。
5.i++以实现一张一张替换。
6.if()判断以实现来回轮播。

---

接着把Run()函数放在加载方法中，即简易轮播完成。

$(function()