js实现图片切换轮播终极版

最新推荐文章于 2020-07-01 08:12:18 发布

mischen520

最新推荐文章于 2020-07-01 08:12:18 发布

阅读量452

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/miachen520/article/details/51854053

版权

javascript 专栏收录该内容

72 篇文章 1 订阅

订阅专栏

js实现图片切换轮播终极版

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title></title>

</head>
<body οnlοad="rollImg()">
<div style="position:relative;width:320px;height:479px" id="container">
    	<div οnmοuseοver="stop()" οnmοuseοut="rollImg()" style="position:absolute; top:0px; left:0px;display:block;" id="con0"><img src="1.jpg" width="320" height="479" /></div>
        <div οnmοuseοver="stop()" οnmοuseοut="rollImg()" style="position:absolute; top:0px; left:0px;display:none;" id="con1"> <img src="2.jpg" width="320" height="479" /></div>
        <div οnmοuseοver="stop()" οnmοuseοut="rollImg()" style="position:absolute; top:0px; left:0px;display:none;" id="con2"><img src="3.jpg" width="320" height="479" /></div>
    	<div οnmοuseοver="stop()" οnmοuseοut="rollImg()" style="position:absolute; top:0px; left:0px;display:none;" id="con3"><img src="4.jpg" width="320" height="479" /></div>
        <div οnmοuseοver="stop()" οnmοuseοut="rollImg()" style="position:absolute; top:0px; left:0px;display:none;" id="con4"> <img src="5.jpg" width="320" height="479" /></div>
        <div οnmοuseοver="stop()" οnmοuseοut="rollImg()" style="position:absolute; top:0px; left:0px;display:none;" id="con5"><img src="6.jpg" width="320" height="479" /></div>
</div>
<div id="nav" style="position:absolute;top:460px;left:180px">
	<div id="nav0" οnmοuseοver="showImg(1)" style="cursor:pointer; margin-left:3px;  float:left;width:20px;height:20px;background-color:green;color:red;text-align:center;">1 </div>
	<div id="nav1" οnmοuseοver="showImg(2)" style="cursor:pointer; margin-left:3px;  float:left;width:20px;height:20px;background-color:blue;color:red;text-align:center;">2 </div>
	<div id="nav2" οnmοuseοver="showImg(3)" style="cursor:pointer; margin-left:3px;  float:left;width:20px;height:20px;background-color:blue;color:red;text-align:center;">3 </div>
	<div id="nav3" οnmοuseοver="showImg(4)" style="cursor:pointer; margin-left:3px;  float:left;width:20px;height:20px;background-color:blue;color:red;text-align:center;">4 </div>
	<div id="nav4" οnmοuseοver="showImg(5)" style="cursor:pointer; margin-left:3px;  float:left;width:20px;height:20px;background-color:blue;color:red;text-align:center;">5 </div>
	<div id="nav5" οnmοuseοver="showImg(6)" style="cursor:pointer; margin-left:3px;  float:left;width:20px;height:20px;background-color:blue;color:red;text-align:center;">6 </div>
</div>
</body>
</html>
<script>
	//创建装imgDiv的数组
	var imgDivs=[];
	//创建装下面导航的Div的数组
	var navDivs=[];
	var showId=1;
	for(var i =0;i<6;i++){
		//分别通过id获取对象  装入对应数组
		var imgDiv=document.getElementById("con"+i);
		var navDiv=document.getElementById("nav"+i);
		imgDivs.push(imgDiv);
		navDivs.push(navDiv);
	}
	function showImg(navId){
		//当是rollImg 调用时  是undefined  不进if
		//当时我们导航过来时  是1-6   为true  进if
		if(navId){
			showId=navId-1;  //更改showId 显示具体哪张图
			stop();  //停止轮询
		}
		for(var i =0;i<imgDivs.length;i++){
			if(showId==i){
				imgDivs[i].style.display="block";//设置显示图片
				navDivs[i].style.backgroundColor="green";//设置导航的背景颜色 对应显示图片
			}else{
				imgDivs[i].style.display="none";//设置不显示图片
				navDivs[i].style.backgroundColor="blue";
			}
		}
		//控制showId  不能超过5   因为下标最多为5
		++showId;
		if(showId==6){
			showId=0;
		}
	}
	//设置轮询
	function rollImg(){
		num=setInterval(function(){
			showImg();
		},2000);
	}
	//消除轮询
	function stop(){
		clearInterval(num);
	}
</script>

mischen520

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js实现图片切换轮播终极版

js实现图片切换轮播终极版 1 2 3 4 5 6 //创建装imgDiv的数组 var imgDivs=[]; //创建装下面导航的Div的数组 var navDivs=[]; var showId=1; for(var
复制链接

扫一扫