使用JS实现简单的轮播效果

最新推荐文章于 2021-06-16 22:21:48 发布

qq_36727889

最新推荐文章于 2021-06-16 22:21:48 发布

阅读量313

点赞数 3

本文链接：https://blog.csdn.net/qq_36727889/article/details/88941013

版权

用JS实现简单的轮播效果

用setInterval()方法，定时几秒之后更换轮播的图片。

JS的代码
<script>
 		//初始化，在页面加载完成之后每2s调用一次changeimg()的方法
		function init(){
			setInterval("changeimg()","2000");
		}
		var i=0;
		//每进入一次函数，改变img的src，以此改变显示的图片
		function changeimg(){
			i++;
			document.getElementById('lunbo').src="img/"+i+".jpg";
			if(i==5){
				i=0;
			}
		}
		//下面的数字链接也是一样
		var a=0;
		var time=setInterval("move()","2000");
		function move(){
			a++;
			$("#"+a).addClass("current");
			$("#"+a).siblings().removeClass("current");
			if(a==5){
				a=0;
			}
		}
	</script>

html代码
<body "init()">
	<div class="lunbo">
		<img src="img/1.jpg" id="lunbo">
		<div class="shuzi">
			<ul>
				<li class="current" id="1"><a href="#">1</a></li>
				<li id="2"><a href="#">2</a></li>
				<li id="3"><a href="#">3</a></li>
				<li id="4"><a href="#">4</a></li>
				<li id="5"><a href="#">5</a></li>
			</ul>
		</div>
	</div>
</body>

这是实现简单的轮播效果，没有实际的点击效果，需要深入学习JavaScript就能够完善相关的功能。