前端学习之旅----Javascript【轮播图】

最新推荐文章于 2025-05-08 19:05:38 发布

原创最新推荐文章于 2025-05-08 19:05:38 发布 · 214 阅读

1 ·

CC 4.0 BY-SA版权

图片请自行替换，此轮播图方法直接，不知道有没有哪位兄台英雄所见略同的。不过对于格式问题实在无力吐槽了。。。。废话不多话，上代码！！！

<!DOCTYPE html>
<html>
<head>
	<title>banner</title>
	<style>
	*{
		margin: 0;
		padding: 0;
	}
	div{
		position: absolute;
	    top: 0;
	    bottom: 0;
	    left: 0;
	    right: 0;
	    margin: auto;
	    height: 400px;
	    width: 70%;
	}
	#food{
		width: 100%;
		height: 100%;
	}
	#left{
		position:absolute;
		top: 48%;
		opacity: 0.5;
	}	
	#right{
		position: absolute;
		top: 48%;
		left: 90%;
		opacity: 0.5;
	}
	</style>
</head>
<body style="background: lightgray">
<!-- 轮播开始 -->
<div>
	<img id="food" src="img/1.jpg">
	<img id="left" src="img/left.jpg">
	<img id="right" src="img/right.jpg">
</div>
<!-- 轮播结束 -->
</body>
<script>
	var F = document.getElementById('food')
	var L = document.getElementById('left')
	var R = document.getElementById('right')
	var i = 1;

	function Banner(){
		if(i==5)
		{
			i = 1;
		}
		else
		{
			i++;
		}
		F.setAttribute('src', 'img/'+i+'.jpg');
	}

	R.onclick = Banner;/*事件调用函数时不要加括号*/

	L.onclick = function(){
		if(i==1)
		{
			i = 5;
		}
		else
		{
			i--;
		}
		F.setAttribute('src', 'img/'+i+'.jpg');
	}
	/*页面加载时调用*/
	window.onload=function()
	{
		setInterval("Banner()",6000);//每6秒轮播一次
	}
</script>
</html>

后期可以加上一些动画之类的！