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

版权声明：啥是版权，感觉都是侵权必究。我也会究的。 https://blog.csdn.net/Scan_13286/article/details/84530026

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(){
	Run();
})

---

接着继续增强效果，需求：将鼠标放入时，图片停止轮播；鼠标移出时，继续轮播。

$(function(){
	Run();
	$("img").hover(function(){
		clearInterval(Time);
		//顺带添加手势效果。
		$("img").css({cursor:"pointer"});		
	},function(){
		Run();
	});
})

---

然后添加按钮，当鼠标点击按钮时，切换到相应的图片。

先布局，使用  li  来做

1.HTML代码

<ul id="ul">
	<li class="black"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

2.Css代码

li{
	float:left;
	width:20px;
	height:20px;
	list-style:none;
	margin-left:5px;
	cursor:pointer;
	border:1px solid #000;
	border-radius:10px;
}
.black{
	background:#000;
}

并添加按钮跟随，即按钮跟随图片一起动，故放在Run()函数中。

	$("#ul > li").removeClass("black");
	$("#ul > li").eq(i).addClass("black");

效果图：

在添加点击事件。当点击按钮时，切换到相应图片和样式。

$("#ul > li").click(function(){
		//获取所有的li数组
		var lis = $("#ul > li");
		//遍历li数组，查询出当前点击的li的索引
		for(var j = 0; j < lis.length; j++){
			//遍历li数组，判断当前点击li和遍历li是否相同。.get(0)为了把li转换为相同类型。
			//测试
			/*alert($(this).get(0));*/
			if($(lis[j]).get(0) == $(this).get(0))
			{
				//更改i的值与j相同，
				i = j;
				//删除其他li的black样式
				$("#ul > li").removeClass("black");
				//给当前li添加black样式
				$(this).addClass("black");
			}
		}
	});

完成了。

全部JavaScript代码：
记得导入JQuery文件

<script type="text/javascript">
var i = 1;
var Time;
var img = new Array("a1.jpg","a2.jpg","a3.jpg","a4.jpg","a5.jpg");
$(function(){
	Run();
	$("img").hover(function(){
		clearInterval(Time);
		$("img").css({cursor:"pointer"});		
	},function(){
		Run();
	});
	$("#ul > li").click(function(){
		//获取所有的li数组
		var lis = $("#ul > li");
		//遍历li数组，查询出当前点击的li的索引
		for(var j = 0; j < lis.length; j++){
			//遍历li数组，判断当前点击li和遍历li是否相同。.get(0)为了把li转换为相同类型。
			//测试
			/*alert($(this).get(0));*/
			if($(lis[j]).get(0) == $(this).get(0))
			{
				i = j;
				$("#ul > li").removeClass("black");
				$(this).addClass("black");
			}
		}
	});
});
function Run(){
	Time = setInterval(function(){
	  $("img").hide();
	  $("img").attr({src:"../images/"+img[i]});
	  $("img").show();
	  $("#ul > li").removeClass("black");
	  $("#ul > li").eq(i).addClass("black");
	  i++;
	  if(i > 4){
		  i = 0;	
	  }
  },1000);
}
</script>

---

更完~~~