js小案例-轮播图（定时器）

最新推荐文章于 2024-04-09 17:12:14 发布
最新推荐文章于 2024-04-09 17:12:14 发布
阅读量7.6k 收藏 54
点赞数 41
分类专栏： 前端 文章标签： js html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lcszz0302/article/details/110681421
版权

大家对于实现轮播图都有什么办法呢？
今天我来介绍一种方法
用JS来实现

1.找几张你喜欢的图片
2.新建一个HTML页面
3.在body里面先添加一张图片

把图片的id值设为img1，同学们可以随便设置，宽高等可以根据自己的喜好来

<img id="img1" src="../img/banner_1.jpg" height="400" width="1500"/>
4.在body的下面新建一个script标签

这里因为我们要做轮播图，所以我们用循环定时器
定义一个循环定时器：每2s切换一张图片，一共四张图片，在循环定时器里面写一个函数叫changeImg()，定义一个变量 i 用来接受图片，把图片的路径赋值给图片的src值，图片每变化一次，我们让 i 自增，当 i 自增到4时，让 i 等于1，这样就可以一直不停地变化下去，达到轮播的效果。

//图片每2秒变化一次，一共四张图片
setInterval(changeImg,2000)
    let i=1
    function changeImg(){
        if(i==4){
            i=1
        }
        img1.src='../img/banner_'+i+'.jpg'
        i++
    }

js的小知识定时器

js的定时器分为两种

.一次性定时器：两种方法

  • 开始一次性定时器：setTimeout()
  • 清除一次性定时器：clearTimeout()

循环定时器：两种方法

  • 开始循环定时器：setInterval()
  • 清除循环定时器：clearInterval()
这样一个简单的皇帝选妃的案例就写好了~~~ 下面附上完整的代码~~~ 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
</head>
<body>
<img id="img1" src="../img/banner_1.jpg" height="400" width="1500"/>
</body>
<script>
    //1.定义一个循环定时器：每2s切换一张图片
    setInterval(changeImg,2000)
    let i=1
    function changeImg(){
        if(i==4){
            i=1
        }
        img1.src='../img/banner_'+i+'.jpg'
        i++
    }
</script>
</html>

点个赞再走呗，客官！

史0327
关注
  • 41
    点赞
  • 踩
  • 54
    收藏
    觉得还不错? 一键收藏
  • 16
    评论
专栏目录
超详细解释:使用定时器实现轮播图效果(HTML、CSS、JavaScript)
weixin_56296642的博客
10-02 1822
超详细解释使用HTML、CSS、Javascript运用定时器知识实现轮播图效果
JavaScript学习之用数组实现图片轮播
sinat_37605922的博客
08-17 4063
js代码：<script type="text/javascript"> //定义num为0 var num=0; //定义一个数组，其中元素为要实现轮播的图片 var array=["mid1.jpg","mid2.jpg","mid3.jpg"]; //获取img元素
【JS基础】JavaScript轮播图代码详解
qq_44580366的博客
07-06 4970
小米轮播图 js 轮播图效果 JavaScript基础项目
js中的定时器具有轮播图片的妙用
rain_hear的博客
09-20 84
动画轮播
javaScript实现轮播图
最新发布
m0_63667667的博客
04-09 370
主要实现轮播图功能
代码笔记 | js数组实现图片自动轮播
代码屠夫CodePudge
09-01 977
使用数组实现图片自动轮播 #main{ width: 700px; height: 450px; margin: 0 auto; text-align: center; } var curIndex = 0; var timeInterval = 1000; var arr = new
网页轮播图（详细版）
热门推荐
m0_48375854的博客
12-24 5万+
        在网页中，我们经常会看到各种轮播图的效果，它们到底是怎样实现的呢？今天，我们就一起来看一下！首先，我们需要准备若干张图片，在这里我准备了五张图片。 功能需求： 鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮。 点击右侧按钮一次，图片往左播放一张，以此类推， 左侧按钮同理。 图片播放的同时，下面小圆圈模块跟随一起变化。 点击小圆圈，可以播放相应图片。 鼠标不经过轮播图， 轮播图也会自动播放图片。 鼠标经过，轮
使用JS来制作轮播图定时器
weixin_64965154的博客
05-18 1443
这个意思就是我们可以使用 document.getElementById(‘ xx ’).innerHTML 来获取指定标签内的html内容这个[i]的意思是素组的下标，因为是动态，所以我们得写i，不能写死。删除之后我们也还需要一个小圆点我们就用到了add是添加的意思，然后我们这个毕竟是轮播图，我们从第一个需要增加，所以我们这里用模板字符串$i+1,JS最新的ES6语法模板字符串。if函数是判断语句，我们这块的意思是如果我们的i已经到了最后一张，那么数组长度就是八，然后会返回来1，这一步必不可少。
JS 轮播图 图片切换（定时器）
qq_38318589的博客
08-13 4万+
JS 轮播图 图片切换（定时器） 这次的轮播图与上次的图片切换相比，仅仅是加上了定时器，使其可以自动切换。 上次的图片切换的链接：https://blog.csdn.net/qq_38318589/article/details/99050117
JavaScript实现轮播图+定时器函数阐述
weixin_46041602的博客
01-24 471
概念：可以在间隔一段时间重复执行代码的函数。
JavaScript使用定时器实现图片轮播
weixin_44788220的博客
07-09 1353
JavaScript使用定时器实现图片轮播
Javascript定时切换图片的轮播实现
04-18
NULL 博文链接：https://freesky-zh.iteye.com/blog/1851276
原生js实现无缝轮播图
10-15
【原生JS实现无缝轮播图】是一种常见的网页动态效果，用于展示一组连续的图片或内容，给用户带来流畅的视觉体验。本文将详细介绍如何利用JavaScript实现这一功能，并提供具体的代码示例。 首先，理解无缝轮播图的...
JS实现焦点图轮播效果的方法详解
10-20
在JavaScript中实现焦点图轮播效果是Web前端开发中常见的需求，这涉及到多个关键技术点的综合运用。以下将详细介绍如何使用JS实现这一效果，并逐一解析所涉及的关键知识点。 首先，我们要明白焦点图轮播的基本原理...
原生js实现轮播图特效
10-15
【原生JS实现轮播图特效】是网页设计中常见的一种动态效果，用于展示多张图片或内容的切换，常用于产品展示、广告宣传等场景。在本文中，我们将深入探讨如何使用纯JavaScript来创建这一功能，以及涉及到的关键知识点...
JS+css3实现幻灯片轮播图
10-14
幻灯片轮播图是一种常见的网页元素，用于展示一组图片或内容，并自动进行循环播放。在本案例中，我们将探讨如何使用JavaScript和CSS3来实现这一功能。 首先，HTML结构是实现轮播图的基础。在给出的代码片段中，可以...
Vue.js轮播图走马灯代码实例（全）
10-17
当鼠标悬停在轮播图上时，`mouseover`事件触发`stopmove()`方法，清除定时器，停止自动切换；当鼠标离开时，`mouseout`事件重新启动`move()`方法，恢复自动切换。 点击左右箭头时，`@click`事件分别触发`zuohua()`...
轮播图定时器
weixin_58470558的博客
04-10 801
定时轮播图片
JavaScript案例-js轮播图
06-12
以下是一个使用 JavaScript 实现的简单的轮播图案例： ```html <!DOCTYPE html> <html> <head> <title>JavaScript 案例：轮播图</title> <style> #slideshow { position: relative; width: 600px; height: 400px; margin: 0 auto; overflow: hidden; } #slideshow img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1s ease-in-out; } #slideshow img.active { opacity: 1; } #slideshow button { position: absolute; top: 50%; transform: translateY(-50%); background-color: #fff; border: none; padding: 10px; cursor: pointer; font-size: 24px; } #slideshow button.prev { left: 0; } #slideshow button.next { right: 0; } </style> <script> var images = ["image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg"]; var index = 0; var slideshow = document.getElementById("slideshow"); var prevButton = document.createElement("button"); var nextButton = document.createElement("button"); function init() { prevButton.innerHTML = "❮"; prevButton.classList.add("prev"); prevButton.addEventListener("click", prevSlide); nextButton.innerHTML = "❯"; nextButton.classList.add("next"); nextButton.addEventListener("click", nextSlide); slideshow.appendChild(prevButton); slideshow.appendChild(nextButton); showSlide(); setInterval(nextSlide, 5000); } function showSlide() { var img = document.createElement("img"); img.src = images[index]; img.classList.add("active"); slideshow.appendChild(img); } function hideSlide() { var activeImg = slideshow.querySelector(".active"); activeImg.classList.remove("active"); slideshow.removeChild(activeImg); } function prevSlide() { hideSlide(); index--; if (index < 0) { index = images.length - 1; } showSlide(); } function nextSlide() { hideSlide(); index++; if (index >= images.length) { index = 0; } showSlide(); } window.addEventListener("load", init); </script> </head> <body> <h1>轮播图</h1> <div id="slideshow"></div> </body> </html> ``` 在这个案例中，我们使用了 JavaScript 来实现一个基本的轮播图。在 HTML 中，我们定义了一个包含图片的 div 元素，并使用 CSS 来设置其样式。在 JavaScript 中，我们定义了一个 images 数组来存储图片的文件名，一个 index 变量来记录当前显示的图片的索引，以及 prevButton 和 nextButton 两个按钮元素来控制切换图片。在 init 函数中，我们初始化轮播图，并设置了自动切换的定时器。在 showSlide 函数中，我们创建一个 img 元素，并将其添加到轮播图中。在 hideSlide 函数中，我们移除当前显示的图片。在 prevSlide 函数和 nextSlide 函数中，我们分别实现了向前和向后切换图片的逻辑。最后，我们在 window 的 load 事件中调用 init 函数来初始化轮播图。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 16
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值