js实现html页面轮播图

最新推荐文章于 2024-05-28 19:26:08 发布
最新推荐文章于 2024-05-28 19:26:08 发布
阅读量602 收藏 2
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lena7/article/details/99433173
版权

思路

我们可以在js中获取到图片元素，然后修改src的值，但我们如何确定图片的路径、以及图片的文件名呢？这就要规范一下图片的路径问题了，我们应该把轮播图放在同一个路径下，且轮播图的文件名有规律，可以让我们轮流获取并赋值。这里我采用的是轮播图的文件名只有最后一位的数字只差，通过遍历i的值，拼接固定的路径+文件名+i来获取下一张图片。

代码

!](https://img-blog.csdnimg.cn/20190813143110552.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlbmE3,size_16,color_FFFFFF,t_70)

lena7
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
如何实现轮播图
VIP_CR的博客
12-28 5333
如何实现轮播图（转载） 版权声明：本文为CSDN博主「_Kattem」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/weixin_42276859/article/details/80648944 1.介绍 轮播图，顾名思义，轮流播放的广告图。它是由网页banner进化而来，通常放在屏幕最显眼...
轮播图实现
qq_40826764的博客
03-18 509
前言 做一下轮播图的效果 正文 1.轮播图实现要求： 页面: 1.视觉窗口,即可见区域 2.包含所有图片的容器 3.具体的每一张轮播图片 4,锚点列表, 点击可跳到具体某一页 5.左右切换按钮 让每一个轮播页大小刚好等于视图窗口大小 1.设置视图窗口宽度, 让超过的部分隐藏 2.设置包含所有图片的容器的宽度为 10000%, 目的是为了让容器足够大. 因为如果容器不够大的话容器中每一张图片就算...
html轮播图
最新发布
qq_64011014的博客
05-28 1484
注意这种方法：需要把图片名称修改为数字必须是连贯的。
实现轮播图，仅需3步
好川的博客
12-10 1万+
快速实现初级轮播图
基于html+js实现轮播图（自动轮播、左右按钮、小圆点点击及切换图片）
热门推荐
未休的博客
02-18 3万+
基于html+js实现轮播图（自动轮播、左右按钮、小圆点点击及切换图片）
HTML 实现轮播页面(包含跨域页面)
somdip的博客
06-07 789
【代码】HTML 实现轮播页面()包含跨域页面。
js实现适合新闻类图片的轮播效果
10-20
轮播图是网页设计中常见的一种元素，用于展示多张图片或内容，通常以自动播放或用户交互的方式进行切换。这种效果可以增加网站的视觉吸引力，同时有效地利用有限的空间展示更多信息。 首先，我们看到HTML结构，包含...
使用html+js+css 实现页面轮播图效果(实例讲解)
10-19
本实例将详细介绍如何使用HTML、JavaScript（JS）和CSS来创建一个基本的轮播图效果。 首先，我们需要在HTML中构建轮播图的基本结构。在给定的代码中，`<section id="main">` 包含了轮播图的主要部分，`...
JavaScript+HTML+CSS实现图片轮播
06-06
例如，使用CSS3的`transition`属性实现平滑的图片切换动画，利用`position`和`z-index`控制图片的堆叠顺序，以及设置按钮的样式和位置。 **JavaScript**是实现图片轮播功能的核心，它提供了动态交互的能力。原生...
原生JS实现旋转轮播图+文字内容切换效果【附源码】
10-17
【原生JS实现旋转轮播图+文字内容切换效果】是一种常见的网页动态展示技术，用于在有限的空间内展示多张图片和相应的文字信息。本文将详细介绍如何使用纯JavaScript来实现这一功能，无需依赖jQuery等库。 首先，...
两种方式实现轮播图
Johncahong的博客
02-11 3632
概述 轮播图可以用UIScrollView或UICollectionView来实现。 用UIScrollView实现轮播图的思路是： 给图片数组的第一个元素（下标0）添加最后一张图片，之后再往末尾添加第一张图片，这样数组就增加了2张图片，第一个元素和倒数第二个元素是最后一张图片，最后一个元素和第二个元素是第一张图片。 根据图片数组的个数创建UIImageView个数，每个UIImageView占据屏幕宽度。首次展示图片时，scrollView定位到（contentOffset）数组的第二个元素，展示第一张
JS实现5张图片轮播效果
11-21
用户控件直接就可用。好资源不解释。还有生成的sql数据库文件，运行一遍就自己建好数据库了，图片文件夹复制过去就可以。
纯html5+css+js轮播图
12-03
1、当鼠标停留在图片上时，轮播图停止波动，当鼠标离开图片的时候，间隔两秒继续轮播； 2、当鼠标进过小圆点时，轮播到相对应的图片位置，然后停止轮播，当鼠标离开圆点时，间隔两秒继续轮播； 3、当鼠标不停留在图片或小圆点处时，间隔两秒轮播；
轮播图的实现及步骤讲解
dyx19971026的博客
08-29 1748
轮播图设计的原理及思路 首先在写好css之后 我们要对接下来的js进行一个分步操作 第一步，我们可以先写好一个自动播放的逻辑： 这部分我们用的方法就是 采用图片作为背景图片，在js里边通过索引来实现图片的切换 第二步，我们要实现一些简单的细节，当我们的鼠标放上去的时候，我们希望这个时候箭头显示，并且当前的自动播放停止，当鼠标移走的时候，箭头也就随之隐藏，这部分很容易实现，我们只需要在鼠标放在上边的...
HTML 用JS写实现图片轮播
程序员小白的博客
11-23 2429
用JS实现一组图片循环且首尾相连的滚动效果 <!DOCTYPE > <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>一组图片循环且首尾相连的滚动效果</title> <styl
html中怎么实现页面轮播图,使用html+js+css 实现页面轮播图效果(实例讲解)
weixin_39880479的博客
06-03 732
使用html+js+css 实现页面轮播图效果(实例讲解)发布时间：2020-09-23 18:10:48来源：脚本之家阅读：121作者：欢呀html 页面轮播图效果<>css页面 carousel.css#main{width: 655px;height: 361px;position: relative;}#picture{width:100%;height: 100%;}#pic...
JavaScript实现HTML轮播，简单有效
xizi_ghq的博客
08-23 951
先说一下需要的知识 setinterval函数，明白document. getelementsById是什么意思。 轮播呈现方式多种多样，鄙人在这里给出一个比较low的方法，若有大神指教，不甚感激！ 思路： 1、在body里面设置一个img标签，src路径暂且不设置，并给img标签设置id。 2、写一个function函数，里面设置src随着某种变量而改变的条件。 下面撸代码！！！ ...
js实现网页轮播图：超详细步骤【新手指北】
m0_60843756的博客
09-10 2154
1. JS函数 2. JS事件 3. JavaScript 对象 4. JavaScript prototype（原型对象） 5. call和apply及bind三者的区别（面试重点） 6. Javascript的事件流模型（面试重点） 7. 防抖与节流（面试精选） 8. JS中的虚拟DOM是什么？（面试重点） 9. 手写一个new，实现同等功能 10. 获得页面url参数的值（常用） ...
HTML 轮播的实现
weixin_44540195的博客
01-17 7691
开发工具与关键技术：DW 轮播的实现 作者：李波 撰写时间：2019.1.16 轮播的实现 原理：移动盒子来实现，改变元素的位置。 一个盒子是显示区域，另一个盒子装载需要展示的图片。设置ID唯一的标识，后续通过id来绑定对应的盒子。注意通过选择器对图片大小进行设置（图片不设置会导致盒子被撑大或拉伸）对应css样式：最外层盒子是她的显示区域。给他设置所需要展示的窗口的大小（注意图片的大小，先对图片进...
html鼠标滑轮换图片,JavaScript实现鼠标滚轮控制页面图片切换
06-07
好的，这是一个非常常见的交互效果，我可以为您提供一个简单的实现方法。 HTML代码： ```html <div class="gallery"> <img src="image1.jpg" alt="Image 1"> <img src="image2.jpg" alt="Image 2"> <img src="image3.jpg" alt="Image 3"> <img src="image4.jpg" alt="Image 4"> </div> ``` CSS代码： ```css .gallery { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; height: 400px; width: 800px; } img { scroll-snap-align: center; height: 400px; width: 800px; } ``` JavaScript代码： ```javascript const gallery = document.querySelector('.gallery'); let isScrolling = false; gallery.addEventListener('wheel', (event) => { event.preventDefault(); if (isScrolling) return; isScrolling = true; setTimeout(() => { isScrolling = false; }, 1000); const delta = event.deltaY; const scrollLeft = gallery.scrollLeft; gallery.scrollTo({ left: scrollLeft + delta, behavior: 'smooth' }); }); ``` 解释一下代码： - 我们首先定义了一个包含多个图片的 `div` 元素，并设置其为可滚动的。 - 然后我们定义了一个 `wheel` 事件监听器，当用户滚动滚轮时就会触发此事件。 - 我们在事件处理程序中首先阻止默认滚动行为，然后检查是否已经在滚动中，如果是，则不执行任何操作。 - 如果不是，则将 `isScrolling` 标志设置为 `true`，并在1秒钟后将其设置为 `false`。 - 接下来，我们获取鼠标滚动的方向和当前已滚动的距离，并使用 `scrollTo` 方法将滚动位置设置为当前位置加上滚动量。 这样，当用户滚动滚轮时，页面上的图片就会根据滚动方向进行相应的切换。当然，您可以根据实际需求对代码进行修改和优化。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值