图片轮播的实现（详解两种方法）

最新推荐文章于 2024-11-08 19:00:00 发布

BalanceWei

最新推荐文章于 2024-11-08 19:00:00 发布

阅读量1.9w

点赞数 7

分类专栏：前端实用总结文章标签：图片轮播前端按钮控制 js轮播浮动

本文链接：https://blog.csdn.net/qq_36793007/article/details/81591692

版权

前端实用总结专栏收录该内容

8 篇文章 0 订阅

订阅专栏

今天带来的是前端里图片轮播的实现，可以说，这两种方法都很简单，尤其第一种，只要是有点基础的应该都可以看懂，这也是小编花费了一定时间想到的代码较少的方式。（图片我放在文末了）

当然也有更复杂的图片，也会有人说第一种方法无法实现链接跳转，其实我只是实现了图片轮播，如果可以做的到轮播，相信聪明的你也可以做到链接跳转的。第二种方法就完全可以加上链接跳转，但是相对第一种方法，第二种理解起来更复杂，但其实只要学会了浮动和层的概念就可以看懂，很像PS中的层的概念。

1、通过背景实现（带按钮变换图片）

首先，是主体部分：

<body onload="showImg()">
		<div id="ad">
			<div id="num">
				<input type="button" name="num1" id="num1" value="1" onclick="showImg(1)"/>
				<input type="button" name="num2" id="num2" value="2" onclick="showImg(2)"/>
				<input type="button" name="num3" id="num3" value="3" onclick="showImg(3)"/>
				<input type="button" name="num4" id="num4" value="4" onclick="showImg(4)"/>
			</div>
		</div>
</body>

然后看看style设置：

<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			#ad {
				width: 360px;
				height: 190px;
				margin: 0 auto;
			}
</style>

最后是js部分（这是精髓）：

<script type="text/javascript">
			var temp = 1; //用来保存哪个图片显示
			function showImg(changNum) { //让背景图片显示
				if (Number(changNum)) {//判断点击了要显示图片的按钮
					clearTimeout(t);
					temp = changNum;
				}
				document.getElementById("ad").style.backgroundImage = "url(images/ad-0" + temp + ".jpg)";
				temp++;
				if(temp == 5) {
					temp = 1;
				}
				t = setTimeout("showImg()", 1000);//刷新时间
			}
</script>

2、通过浮动实现（不带按钮，也可以实现带按钮，看懂了第一种你可以自己动手写入按钮）

主体部分：

<body onload="hiddenImg()">
		<div class="wide">
			<img src="images/1.jpg" />
			<div id="ad0">
				<img src="images/2.gif"/>
			</div>
			<div id="ad1">
				<img src="images/ad-01.jpg"/>
			</div>
			<div id="ad2">
				<img src="images/ad-02.jpg"/>
			</div>
			<div id="ad3">
				<img src="images/ad-03.jpg"/>
			</div>
			<div id="ad4">
				<img src="images/ad-04.jpg"/>
			</div>
		</div>
</body>

style部分：

<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.wide{
				width: 360px;
				height: 190px;
				margin: 0 auto;
				background-color: yellow;
			}
			#ad0,#ad1,#ad2,#ad3,#ad4{
				position: absolute;
				left: 490;
				top: 0;
				z-index: 1;
			}
</style>

js部分：

<script type="text/javascript">
			var temp = 0;//用来保存应该从哪个图片开始隐藏
			function showImg(){//让所有图片显示
				for (var i = 0; i <= 4;i++ ) {
					document.getElementById("ad"+i+"").style.display = "block";
				}
			}
			function hiddenImg(){
				showImg();//先让所有图片显示
				for (var i = temp;i <= 4;i++ ) {//判断需要隐藏的图片
					document.getElementById("ad"+i+"").style.display = "none";
				}
				temp++;
				if (temp == 6) {
					temp = 0;
				}
				setTimeout("hiddenImg()",1000);
			}
</script>

图片如下：