【JS学习总结】如何使用JS实现轮播图效果

最新推荐文章于 2024-06-17 15:29:34 发布

ghscarecrow

最新推荐文章于 2024-06-17 15:29:34 发布

阅读量362

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/ghscarecrow/article/details/81869744

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

前言：这个系列主要是对之前学习JavaScript实现的一些小demo的总结，总觉得不能这样学过了就算了，趁着假期就好好总结一下吧。

在平时的网站开发过程中，我们经常会遇到这样的一个需求：在首页实现一个轮播图效果。

那么，我们应该怎么实现这种效果呢？

首先，来分析一下，轮播图其实也就是一个图片，在一定的时间内这个图片会变化，置换成另外一个图片，根据这个逻辑，我们可以确定可以这样使用JS代码来实现这个效果

使用到的技术点如下：

获取元素 document.getElementById(“id 名称”)

事件(onload)

定时操作：setInterval(“changeImage()”,3000);

代码书写步骤如下;

第一步：确定事件(onload)并为其绑定一个函数

第二步：书写绑定的这个函数

第三步：书写定时任务(setInterval)

第四步：书写定时任务里面的函数

第五步：通过变量的方式，进行循环(获取轮播图的位置，并设置 src 属性)

注意点：

1：在循环的时候需要注意到了最后一张图片的时候要重置

2： <body οnlοad="init()">

3：在指定位置要定义 id，方便JS代码获取对应的标签元素

JS代码实现如下：

<script>
			function init(){
				setInterval("changeImage()",3000);//设置定时器，每3秒调用changeImage()函数一次
			}
			//更改图片的函数
			var i = 0;
			function changeImage(){
				i++;
				document.getElementById("image1").src = "../img/"+ i +".jpg";
				//如果i等于3了，则将其重置为0(这里是因为我只准备了三张图片)
				if(i == 3){
					i=0;
				}
			}
		</script>

ghscarecrow

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
【JS学习总结】如何使用JS实现轮播图效果

前言：这个系列主要是对之前学习JavaScript实现的一些小demo的总结，总觉得不能这样学过了就算了，趁着假期就好好总结一下吧。在平时的网站开发过程中，我们经常会遇到这样的一个需求：在首页实现一个轮播图效果。那么，我们应该怎么实现这种效果呢？首先，来分析一下，轮播图其实也就是一个图片，在一定的时间内这个图片会变化，置换成另外一个图片，根据这个逻辑，我们可以确定可以这样使用JS代码来...
复制链接

扫一扫

专栏目录