HTML实现轮番图的方法，body极简化，给爱写脚本的朋友--＞利用js实现带按钮（鼠标点击时停止自动轮播/自动轮播）(第二篇)

最新推荐文章于 2022-01-28 10:28:33 发布

我是X大魔王

最新推荐文章于 2022-01-28 10:28:33 发布

阅读量1.9k

点赞数 5

分类专栏： javascript🎈 文章标签： html javascript css

转载必须声明

本文链接：https://blog.csdn.net/Xmumu_/article/details/122169680

版权

javascript🎈 专栏收录该内容

15 篇文章 3 订阅

订阅专栏

本文通过HTML和JavaScript实现了一个简洁的图片轮播效果，特点是body结构简单，仅包含一个图片元素和一个ul列表。代码中使用定时器自动切换图片，并支持手动点击列表项切换。当鼠标悬停在图片上时，轮播会暂停，鼠标离开后继续自动播放。

摘要由CSDN通过智能技术生成

hi,这里是X，接着来玩轮番图噢😛，有兴趣的朋友也可以去看看我写的前一篇文章，也是实现轮番图的，对比学习一下：HTML实现轮播图的方法：纯CSS实现+js实现（鼠标点击时停止自动轮播/自动轮播）第一篇

这篇文章的轮番图做法和平常的一些可能会不太一样，因为它的body部分长这样：

<div id="pic">
    <img src=""/>
    <ul>
    </ul>
  </div>

不要太惊讶，如果有喜欢body极简化、喜欢写脚本的朋友有福气啦😎
我个人而言的话，也还挺喜欢的，以下是效果图:

在这里插入图片描述

代码+详细注释

<!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:300px;height:206px; margin:0 auto;}
	#pic img{width:300px;height:206px;}
	#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];// 得到ul
		var arrUrl = ['images/p1.jpg','images/p2.jpg','images/p3.jpg','images/p4.jpg'];
		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(){		//使用定时器实现每隔2秒自动切换图片
		  timer = setInterval(function(){
			num++;
			num %= arrUrl.length;  // 防止下标溢出
			fnTab();
			},2000);
		}
		
		autoPlay();//调用自动切换图片函数
	
		oImg.onmouseover = function(){//鼠标移到图片上停止图片切换
			clearInterval(timer);	
		}
		oImg.onmouseout = autoPlay;//鼠标移开图片后继续自动切换图片，注意这里是没有括号的噢
	};
</script>
</head>
<body>
  <div id="pic">
    <img src=""/>
    <ul>
    </ul>
  </div>
</body>
</html>