图片轮播的实现(详解两种方法)

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

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

图片如下:

阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页