JS实现最简单的轮播图及其原理

桃扇骨 2022-03-20 08:37 234阅读 0赞

## 轮播图的实现——最基础的原理 ##

**方法1（使用setInterval的方法）：**  
看下网上很多教程，不论是html还是css的部分做的都太过于详细了，所以我把代码都尽量缩到了最简单，只是记录（给自己看）和讲解（给大家看）其中的原理，直接上代码。。。  
1，html部分：

<div id="try">//做一个大框把轮播图片放进去即可
        <img src="1.png" style="display: block;" />//第一张图片设置显示，另外两张用css中display=‘none’来隐藏起来
        <img src="2.png"/>
        <img src="3.png"/>
      </div>

2，css部分：

#try img{           //选择id为try中的img图片
          position: absolute;           //位置设为相对位置，这样图片才会叠加在一起，不然只会按顺序排列，div最好
          设置宽高
          display: none;隐藏图片
        }

3，js部分：

var tray=document.getElementById("try");   //获取id为try的文件
        var is=tray.getElementsByTagName('img');    //获取try中的图片
        var c=0;
    	setInterval(function(){            //设置计时器，格式为setInterval（function(）{}，time）
          c++;                          //因为获取到的图片是一个数组，为显示后续图片，数组编号+1
          if (c==3) {                 //本例中只设置了3个图片，所以第三张图片之后，数组编码重新归零
          c=0;
          }
    
          for (var i = 0; i < is.length; i++) {     //做一个for循环，使每一个图片的display属性为none，隐藏图
          is[i].style.display='none';
          }
          is[c].style.display='block';          //显示第c张图片
    	},1000)

**方法2（使用其他的方法）：**  
未完待续。。。

发表评论取消回复

表情：

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

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

相关阅读

相关 JS实现简单的轮播图

S实现简单的轮播图 js用面向过程的方法实现简单的轮播图先写好简单的html布局；正常轮播图所要实现的功能有一下几个： 1.banner图的自动切换；...

逃离我推掉我的手/ 2024年04月18日 08:27/ 0 赞/ 95 阅读

相关 JS实现简单的轮播图

1. 用display属性的block或none控制轮播图代码如下： <!DOCTYPE HTML> <head> <met

ゝ一纸荒年。/ 2023年07月06日 06:24/ 0 赞/ 130 阅读

相关 html中简单轮播图实现原理,常见轮播效果及其实现原理

常见轮播效果及其实现原理说明：本项目只做最基础的原理分析与最简单的应用场景。 1. 简单做法：css定位 + js滑动动画思路：在同一个父容器内， 1. 通过改

痛定思痛。/ 2022年10月05日 12:44/ 0 赞/ 219 阅读

相关 html中简单轮播图实现原理,jQuery实现一个简单的轮播图

jQuery实现一个简单的轮播图发布时间：2020-08-25 02:23:35 来源：脚本之家阅读：100 作者：nameless-212 html代码：轮

逃离我推掉我的手/ 2022年10月05日 12:44/ 0 赞/ 260 阅读

相关图片轮播html实现原理,简单轮播图的实现及原理讲解（js）

0.最终效果预览 ![366e374e108d][] 鼠标未触及区域时(自动滚动中) ![366e374e108d][] 鼠标触及区域后 (停止滚动，显示按钮) 基本

叁歲伎倆/ 2022年10月05日 10:57/ 0 赞/ 331 阅读

相关原生js实现最简单的轮播图

代码部分： html: <div> <ul> <li><img src="01.jpg" width="300px"></li> <l

我就是我/ 2022年05月23日 08:40/ 0 赞/ 219 阅读

相关最简单的轮播图实现

需求：每隔2秒切换一张图片的效果 <!DOCTYPE html> <html lang="en"> <head> <meta char

偏执的太偏执、/ 2022年05月10日 20:40/ 0 赞/ 250 阅读

相关 js实现简单的轮播图

html+css代码： <!DOCTYPE html> <html> <head lang="en"> <meta charset="

刺骨的言语ヽ痛彻心扉/ 2022年04月17日 03:54/ 0 赞/ 286 阅读

相关 JS实现最简单的轮播图及其原理

轮播图的实现——最基础的原理方法1（使用setInterval的方法）：看下网上很多教程，不论是html还是css的部分做的都太过于详细了，所以我把代码都尽量缩到

桃扇骨/ 2022年03月20日 08:37/ 0 赞/ 235 阅读

相关 js实现轮播图（简单滚动轮播)

原理：在页面上有一个可视区域（a），用来显示图片，还有一个放所有需要轮播的图片的区域(b) ，当执行操作时，b需要移动，移动一个a的宽度，使下一张图片显示，

冷不防/ 2021年11月10日 09:30/ 0 赞/ 707 阅读