JS基础——多张图片循环切换

最新推荐文章于 2024-09-16 14:55:55 发布
最新推荐文章于 2024-09-16 14:55:55 发布
阅读量980 收藏 2
点赞数
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/raosheng1993/article/details/45422327
版权


[html] view plain copy 在CODE上查看代码片 派生到我的代码片
  1. <!doctype html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>JS基础——多张图片循环切换</title>  
  6. <script>  
  7. window.onload = function(){  
  8.     var oImg = document.getElementById('img');  
  9.     var arr = ['images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg','images/5.jpg'];  
  10.     var num = 0;  
  11.       
  12.     oImg.onclick = function(){  
  13.         num ++;   
  14.         if(num == arr.length){  
  15.             num = 0;      
  16.         }  
  17.         oImg.src = arr[num];  
  18.     };    
  19. };  
  20. </script>  
  21. </head>  
  22.   
  23. <body>  
  24. <img id="img" src="images/1.jpg" />  
  25. </body>  
  26. </html>  

思路：

1.先获取图片的id

2.定义一个存放多个图片的数组，并给它一个初始编号 num=0;

3.当点击图片时，先让num自增，然后判断num的值是否和数组的长度相等，如果相等，就让num回到0；

4.最后就把arr[num]赋给oImg的src属性，就能读取到图片的路径了。

这样，多张图片点击循环切换就完成了。

ruby小酱
关注
专栏目录
网页模板——基于Swiper轮播图切换特效 8种.zip
11-24
Swiper是一款广泛应用于网页设计中的开源JavaScript库，主要用于创建高质量的滑动效果，如轮播图、幻灯片切换等。这款库以其灵活性、高性能和丰富的功能而受到开发者喜爱。在"网页模板——基于Swiper轮播图切换特效 ...
JS轮播图详解
weixin_75154342的博客
09-17 3890
JS轮播图的实现核心是使用JavaScript来控制图片的切换和显示，配合HTML和CSS完成布局和样式设置。通过定时器实现图片的自动切换，并通过事件监听器实现对鼠标事件的响应。CSS样式：通过CSS样式对容器和列表进行布局和样式设置，例如设置容器的宽度、高度、背景色等，并设置列表项的宽度和高度，以及布局方式，使图片水平排列在一行。调整功能和样式：根据需求，可以进一步调整轮播图的功能和样式，例如添加左右切换按钮、指示器、淡入淡出效果等。HTML结构：首先，在HTML中创建一个包含轮播图的容器，通常使用。
【超详细教程】基于html+js实现轮播图
01101
12-04 8327
首先，需要获取轮播图容器和轮播图图片的元素，可以通过document.getElementById()方法获取容器元素，通过getElementsByTagName()方法获取图片元素。同时，我们也可以根据需要进一步优化和扩展轮播图的功能，例如添加按钮来手动切换图片、添加动画效果等，以满足更多的设计需求。在这个示例中，我们创建了一个基本的轮播图，使用HTML作为容器，CSS来设置样式，JavaScript来实现图片的切换和自动播放。接下来，需要添加CSS样式来设置容器元素的样式，以及轮播图中图片的样式。
基于vue原生js实现轮播图，中间大两边小，循环轮播，突破element中的走马灯最多放三个的限制。以显示轮播5个为例，可以添加多个图片进行循环。显示多少个由自己决定
qq_920189602的博客
11-04 3629
5、单数据超过5条时，每一次切换图片下标时，都更新数据，这里需要两个数组数据，一个数组（A）存放5个，用户页面的显示。另一个数组（B）数据则是当前一共有多少张图片。3、点击右边小图标或者点击下一张时，每个图片当前位置下标加一，当加到下标超过数组数据长度时，下标重置0开始，循环（点击左边相反）2、点击两边某个图片要是显示在中间时，当前的图片位置与中间位置进行互换。4、每换一次下标，最中间的图片都要放大，总之按照自己需求，添加变化样式。1、初始化的时候，给当前五个图片设置固定的样式（中间图片大，两边小）
使用JavaScript实现图片轮播效果
geng1025的博客
01-02 869
在网页设计中，图片轮播是一种常见的功能，可以让用户在多张图片之间平滑切换。使用JavaScript可以实现这种效果，而不需要依赖任何第三方库。下面是一个简单的示例，展示如何使用JavaScript实现图片轮播功能。
网页模板——vue.js实现的单排卡片滚动切换特效代码.zip
11-23
在这个"网页模板——vue.js实现的单排卡片滚动切换特效代码"中，我们主要会探讨如何利用Vue.js来创建一个具有动态滚动效果的卡片布局。这种效果常见于许多网站，尤其是展示产品或服务的页面，它能够提供一种优雅的...
图片无缝轮播代码——————
08-06
此外，我们还可以添加额外的功能，如导航箭头或点状指示器，以便用户手动切换图片。这需要在HTML中添加相应元素，并在JavaScript中处理点击事件： ```html <button id="prev">Previous <button id="next">Next ...
多种js图片切换效果
09-10
实现这种效果，我们可以利用JavaScript的`setInterval`函数来定时执行切换图片的代码。同时，我们需要维护一个图片数组，记录所有待显示的图片源，并调整图片容器的`src`属性来完成切换。 第二种是点击切换效果。...
jsp程序——图片的切换
05-26
- **遍历结果集**：使用`while(rs.next())`循环遍历结果集中的每一行数据，获取每张图片的路径，并将其添加到数组中。 ```jsp (rs.next()) { %> imgs.push("images/("pic")%>"); ``` ##### 3.3 JavaScript实现...
js通过循环多张图片实现动画效果
10-15
主要为大家详细介绍了js通过循环多张图片实现动画效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
纯JS实现图片左右循环切换
08-09
纯JS实现图片左右循环切换，类似CSDN首页，鼠标停留在图片上就停止自动切换
js实现轮播图
weixin_45867761的博客
02-21 2421
原理:一次性加载所有图片，使用定位将图片重合在一起，根据opacity，z-index 属性显示当前图片
JavaScript：10种图片展示效果提升用户体验
最新发布
weixin_42561464的博客
09-16 2505
本文还有配套的精品资源，点击获取 简介：JavaScript作为一种在网页和网络应用中广泛应用的编程语言，尤其擅长创建动态和交互式体验。本文将介绍10款使用JavaScript打造的图片展示效果，包括轮播图、网格布局、悬停效果、图片画廊、图片懒加载、360度全景图、动态裁剪和缩放、图像动画、图片过滤和SVG图形与图片结合。这些效果通过提升网站的视觉吸引力来增强用户体验，并展...
js案例：简单的图片轮播（代码逐行讲解，建议先看完整代码）
热门推荐
qq_52799985的博客
08-09 1万+
做一个简单的js图片轮播效果并不需要特别多的知识点，代码逐行讲解，小白必看。
利用JavaScript jQuery实现图片无限循环轮播(不借助于轮播插件)-----转载
weixin_33800463的博客
09-27 669
前言 　　作为一个前端工程师，无论公司是什么行业，无论你做什么端，基本都会遇到一个避不开的动画效果：循环轮播。做轮播并不难，市场上的轮播插件有很多，其中比较著名的是swiper，使用也非常简单。但轮播插件这种东西总归是不灵活的，一些简单的场景还可以应付，比较复杂一点的场景处理起来就比较麻烦了。今天我会全程带大家来写一个循环轮播，用到的技术有：html、css、JavaScript、jQuery，...
JavaScript控制多张图片循环播放（淡入淡出效果）
流浪狗的专栏
12-12 1304
style>.imgShow{    font-size: 12px;    background-color: #B0C6CE;    text-align: center;    vertical-align: middle;    display: table-caption;    border-top-width: thin;    border-right-width: thin;  
使用JavaScript实现轮播图功能（超详细）
rr20060119的博客
03-29 2258
通过自动或手动切换，轮播图能够有效地吸引用户的注意力，并展示重要的信息。在本篇博客中，我们将详细介绍如何使用原生JavaScript来实现一个简单的轮播图功能。切换图片：编写一个函数来切换图片，通过改变轮播图容器的transform属性来实现。首先，我们创建一个简单的HTML结构，其中包含轮播图的容器、图片和控制按钮。现在，我们使用JavaScript来实现轮播图的功能。设置状态：为轮播图设置一个当前索引状态，用于跟踪当前显示的图片。HTML结构：创建一个包含图片和轮播图控制按钮的HTML结构。
js实现无缝轮播图
weixin_45571121的博客
09-11 4187
一、轮播图需求 需要实现每隔一定时间进行下一张图片的自动轮播 需要点击左右按钮可以进行上下图片的切换 显示当前位置的小圆点 点击小圆点可以切换到对应的图片上 鼠标移入可视区时，停止轮播，显示左右按钮 下面我们来看一下效果图： 二、轮播图的原理 图片移动实现原理：利用浮动将所有所有照片依次排成一行，给这一长串图片ul添加一个父级的遮罩（就是可视区），每次只显示一张图，其余的都隐藏起来。对图片添加绝对定位，通过控制left属性，实现照片的移动。 图片移动动画原理：从当前图片移动到下一张...
js实现轮播图_高性能轻量级零依赖的轮播图组件——Glider.js
06-01
Glider.js是一个高性能轻量级零依赖的轮播图组件，适用于移动端和桌面端。它具有以下特点： 1. 零依赖：不依赖任何第三方库，代码量小，易于维护。 2. 高性能：使用原生JavaScript实现，运行速度快，不会影响网页加载速度。 3. 支持响应式布局：自动适应不同的屏幕尺寸。 4. 支持无限循环：可以无限循环播放轮播图。 5. 支持滑动手势：支持手势切换轮播图。 使用Glider.js可以快速实现轮播图功能。下面是一个简单的示例： 首先，在HTML中引入Glider.js的CSS和JavaScript文件： ```html <link rel="stylesheet" href="glider.css"> <script src="glider.js"></script> ``` 然后，在HTML中创建一个包含轮播图的容器： ```html <div class="glider"> <div class="glider-track"> <div class="glider-slide">Slide 1</div> <div class="glider-slide">Slide 2</div> <div class="glider-slide">Slide 3</div> </div> </div> ``` 最后，在JavaScript中初始化Glider.js： ```javascript new Glider(document.querySelector('.glider'), { slidesToShow: 1, dots: '.dots', draggable: true, arrows: { prev: '.glider-prev', next: '.glider-next' } }); ``` 以上代码中，slidesToShow表示每次显示几张图片，dots表示是否显示小圆点，draggable表示是否支持手势滑动，arrows表示是否显示左右箭头。 通过上述简单的代码示例，你可以快速实现一个轮播图，并且Glider.js具有更多的配置项和API，可以满足各种不同的需求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值