JavaScript使用定时器实现图片轮播

最新推荐文章于 2023-09-21 22:55:09 发布

Su魏

最新推荐文章于 2023-09-21 22:55:09 发布

阅读量1.3k

点赞数 1

分类专栏： javaScript 文章标签：大数据

本文链接：https://blog.csdn.net/weixin_44788220/article/details/125697937

版权

javaScript 专栏收录该内容

9 篇文章 3 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>使用定时器实现图片轮播</title>
<style>
	ul{margin:0;padding:0;}
	li{display:inline-block;}
	body{background:#333;}
	#pic{width:487px;height:500px; margin:0 auto;}
	#pic img{width:487px;height:500px;}
	#pic ul{margin-top:10px;text-align:center;}
	#pic .item,#pic .active{width:9px;height:9px;cursor: pointer;
		 border-radius:10px;margin:1px 1px 1px 8px;}
	#pic .item {background:#FFF;}
	#pic .active {background: #F60;}
</style>
<script>
	window.onload = function(){
		var oDiv = document.getElementById('pic');
		var oImg = oDiv.getElementsByTagName('img')[0];
		var oUl = oDiv.getElementsByTagName('ul')[0];
		var arrUrl = ['images/p1.png','images/p2.png','images/p3.png','images/p4.png'];
		var aLi = oDiv.getElementsByTagName('li');
		var num = 0;
		var timer = null;//定时器
		
		//生成对应图片个数的列表项
		for(var i = 0; i < arrUrl.length; i++){
		    oUl.innerHTML += "<li class = 'item'></li>";
		}
	 
		//初始化
		function fnTab(){
		   oImg.src = arrUrl[num];
		   for(var i = 0; i < aLi.length; i++){
			 aLi[i].className = 'item';//首先全部清空活动状态
		   }
		   aLi[num].className = 'item active';//然后设置当前li为活动状态
		}
		
		fnTab();//调用函数实现初始化设置
		 
		for(var j = 0; j < aLi.length; j++){
			aLi[j].index = j;//为每个列表项自定义索引属性，属性值和数组下标一一对应
			aLi[j].onclick = function(){ 
				num = this.index;//将当前li的索引属性值赋给变量num
			fnTab();
			};
		}
		
		function autoPlay(){//使用定时器实现每隔5秒自动切换图片
		  timer = setInterval(function(){
			num++;
			num %= arrUrl.length;
			fnTab();
		},3000);
		}
		
		autoPlay();//调用自动切换图片函数
	
		oImg.onmouseover = function(){//鼠标移到图片上停止图片切换
			clearInterval(timer);
		}
		oImg.onmouseout = autoPlay;//鼠标移开图片后继续自动切换图片
	};
</script>
</head>
<body>
  <div id="pic">
    <img src=""/>
    <ul>
    </ul>
  </div>
</body>
</html>