JavaScript实现网页轮播，简单有效

分手后的思念是犯贱 2022-03-25 19:50 171阅读 0赞

![1240][]

先说一下需要的知识 setinterval函数，明白document. getelementsById是什么意思。

轮播呈现方式多种多样，鄙人在这里给出一个比较low的方法，若有大神指教，不甚感激！

思路：

1、在body里面设置一个img标签，src路径暂且不设置，并给img标签设置id。

2、写一个function函数，里面设置src随着某种变量而改变的条件。

下面撸代码！！！

> <!DOCTYPE html>
> 
> <html>
> 
> <head>
> 
> <meta charset="utf-8" />
> 
> <title></title>
> 
> </head>
> 
> <body>
> 
> <img id = "image"/>
> 
> <script >
> 
> function $(id)\{
> 
> return document.getElementById(id);
> 
> \}
> 
> var index=1;
> 
> function setSrc()\{
> 
> $("image").src="./img/"+index+".png";
> 
> \++index;
> 
> if(index==3)\{
> 
> index=1;
> 
> \}
> 
> \}
> 
> setSrc();
> 
> setInterval("setSrc()",500);
> 
> </script>
> 
> </body>
> 
> </html>

在这里我采用了投机取巧的方式，我的图片名都是：

读者可以按照需要改变一下函数的结构

![1240 1][]

**“自己整理了一份最全面前端学习资料,从最基础的HTML+CSS+JS \[炫酷特效，游戏，插件封装，设计模式\]到移动端HTML5的项目实战的学习资料都有整理，送给每一位前端小伙伴, 有想学习web前端的，或是转行，或是大学生，还有工作中想提升自己能力的，正在学习的小伙伴欢迎加入学习。”**

**加Q 裙：956940552（招募中）**

[1240]: /images/20220325/540fb82eb02f46b683a8f9488338aa1d.png
[1240 1]: /images/20220325/e31685eeca8a4507853cc12378ab1149.png

发表评论取消回复

表情：

评论列表（有 0 条评论，171人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript简单的实现轮播图

用JavaScript简单的实现轮播图： 1.鼠标不触碰图片时，图片以1.5秒的速度自动播放。 2.鼠标触碰图片时，自动轮播图片停止。 3.鼠标点击1-5时，通过下标跳转

我就是我/ 2023年01月16日 11:29/ 0 赞/ 140 阅读

相关 Html图片轮播遍历,javaScript 简单轮播图实现

Document .crousel \{ width:1500px; height: 500px; margin: auto; position: relative

比眉伴天荒/ 2022年10月09日 05:54/ 0 赞/ 218 阅读

相关简单html实现图片轮播,JavaScript实现简易轮播图

JavaScript实现简易轮播图 Html代码块： ![1.jpg][] ![2.jpg][1.jpg] ![3.jpg][1.jpg] ![4.jpg][1.jp

小鱼儿/ 2022年10月06日 09:47/ 0 赞/ 333 阅读

相关 html网页简单实现图片轮播效果,html+css+js简单实现图片轮播效果

\\{background-color:green;\} \lunbo\{ width:600px; height:600px;position:relative;left:

ゞ浴缸里的玫瑰/ 2022年10月06日 07:49/ 0 赞/ 325 阅读

相关 html网页简单实现图片轮播效果,CSS3简单实现图片切换轮播

HTML代码： A B C CSS代码：.pic-switch\{ width: 500px; height: 300px; margin: 0px auto;

曾经终败给现在/ 2022年10月06日 06:59/ 0 赞/ 281 阅读

相关 javascript图片轮播的简单实现

目前许多的javascript框架都带有图片轮播的功能，但是我们也应该知道如何用单纯的javascript代码来实现属于我们自己的轮播程序。那么，如果你是新手并且

╰半夏微凉°/ 2022年08月07日 01:59/ 0 赞/ 183 阅读

相关 javascript实现简单轮播器

html代码： <DOCTTYPE!> <html> <head> <meta charset='utf-8'> <script src="index

柔光的暖阳◎/ 2022年07月16日 01:52/ 0 赞/ 170 阅读

相关用原生JavaScript实现简单轮播图

html代码 <div id="banner"> <ul> <li><img src="images/1.jpg"></li>

野性酷女/ 2022年05月27日 11:20/ 0 赞/ 223 阅读

相关 JavaScript实现HTML轮播，简单有效

先说一下需要的知识 setinterval函数，明白document. getelementsById是什么意思。轮播呈现方式多种多样，鄙人在这里给出一个比较low的方法，

Myth丶恋晨/ 2022年05月15日 01:54/ 0 赞/ 160 阅读

相关 JavaScript实现网页轮播，简单有效

![1240][] 先说一下需要的知识 setinterval函数，明白document. getelementsById是什么意思。轮播呈现方式多种多样，鄙人在这里给出

分手后的思念是犯贱/ 2022年03月25日 19:50/ 0 赞/ 172 阅读