原生JS做图片轮播（自动或手动）

最新推荐文章于 2024-09-19 15:58:23 发布
最新推荐文章于 2024-09-19 15:58:23 发布
阅读量7k 收藏 12
点赞数 3
分类专栏： 前端学习 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fengyao1995/article/details/51570238
版权
本文介绍如何使用原生JavaScript实现手动控制的图片轮播效果。由于与现有项目中的EasyUI库存在冲突，作者决定放弃使用jQuery插件，转而采用原生JS编写。轮播原理包括设置图片li元素、缩略图切换和事件监听。在实践中，作者发现原生JS更容易理解和操作。此外，还提到当点击特定图片时，可以将其设置为轮播的起始位置。
摘要由CSDN通过智能技术生成

前言


    前端基本上靠用现成的封装好的控件的我，今天也算是自己改了一回代码，也自己写了写原生JS，改了一下响应代码。需求是这样的，页面的记录中有多个附件，如果附件是图片的话，查看图片时要多张图片进行轮播，实际需求是不能自动，要手动控制图片切换。说起来也不难，用插件就好了，但是查了好多插件都用到了jquery.min.js，但是这个js文件和项目中用的EasyUI引用的js文件冲突了，解决冲突没成功，所以改方案了，换成原生JS写了，发现还是原生JS好理解。


轮播原理


先看一下我们需要的效果：

           

动态图太大，请下载查看：http://download.csdn.net/download/u013038861/9539504


    下面就是图片轮播的原理，原理并不难，实现起来有点麻烦，不过细心点还是很好玩的。

        1、设置li放需要轮播的图片

<
最低0.47元/天 解锁文章
用js代码制作网页轮播图效果
weixin_44830974的博客
04-18 6058
Document <script type="text/javascript"> //获取元素 var o=document.querySelector('.cou'); var as=document.querySelector('...
用JS制作轮播图
qq_41672008的博客
01-30 486
运用JS制作轮播图的动画效果，代码如下： &lt;!DOCTYPE html&gt; &lt;html&gt;     &lt;head&gt;         &lt;meta charset="utf-8"&gt;         &lt;title&gt;&lt;/title&gt;         &lt;style type="text/css"&amp
图片轮播
zenkle的博客
10-26 302
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;最简单的轮播效果&lt;/title&gt; &lt;style type="text/css"&gt;
前端——JavaScript实现图片轮播
最新发布
2301_78566776的博客
09-19 282
JavaScript设计实现轮播图效果。2.设置左右按键，实现。1.图片每隔3s可以。，可以根据下标选择要展示的图片。
JS实现轮播图的三种简单方法。
热门推荐
m0_67392409的博客
03-11 1万+
Js实现轮播图01 实现思路 这可能是轮播图最简单点的实现之一，通过更改图片的src来实现该效果，首先需要将图片命名格式统一比如pic01.jpg，pic02.jpg…,再通过js使用定时器去改变img标签里面的src图片链接的名字来实现切换效果。代码如下： 实现效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>轮播图实现01</title> &
JavaScript之轮播图制作
weixin_44827643的博客
07-06 2349
目录1.轮播布局2.JS动态效果（1）根据图片个数得到图片列表区域的宽度（2）根据图片个数创建相应的圆点并为每个圆点绑定自定义属性 （3）通过事件委托给圆点切换区域绑定点击事件，根据圆点的自定义属性值进行相应的切换 （4）通过定时器设置图片自动切换的效果3.解决bug本文主要介绍如何利用原生JS实现简单的轮播图效果，主要分成三大步骤。轮播区域是由一个大模块包裹，设置固定宽高。内部分为图片列表区域和圆点切换区域。图片列表区域存放的是轮播图的图片，圆点切换区域用于后期动态切换图片，由图片个数动态生成。 （2
原生JS层叠图片轮播展示特效代码
03-20
"原生JS层叠图片轮播展示特效代码"正是一种实现这种效果的技术手段，它利用JavaScript的原生功能来创建一个富有视觉吸引力的图片轮播展示。下面将详细探讨这个主题。 首先，原生JS是指直接使用JavaScript语言本身，...
原生js图片轮播切换代码
06-24
本项目名为“原生js图片轮播切换代码”，它利用JavaScript的原生功能来实现图片的自动轮播以及通过标题和索引按钮进行手动控制。下面将详细介绍这个项目中的关键知识点。 1. **原生JavaScript**： - 原生...
原生js实现点击轮播和自动轮播代码
05-30
在网页设计中，图片轮播是一种常见的展示方式，可以有效地展示多张图片或内容，而无需占用过多空间。本教程将详细介绍如何使用原生JavaScript实现一个具有自动播放、鼠标悬停暂停、左右焦点切换以及底部小按钮切换...
原生JS层叠图片轮播展示代码
04-07
在网页设计中，图片轮播是一种常见的元素，用于在有限的空间内展示多张图片或内容。原生JS层叠图片轮播展示代码是利用JavaScript语言实现的一种高效且灵活的图片展示方式，尤其适用于创建吸引人的焦点图效果。下面将...
原生javascript图片自动或手动切换示例附演示
10-26
在本文中，我们将深入探讨如何使用原生JavaScript实现图片自动或手动切换的焦点图功能。这个功能在网页设计中非常常见，例如在产品展示、新闻轮播等场景下。我们将通过分析提供的HTML代码和JavaScript源代码来理解其...
JS实现轮播图例子
01-07
简单的图片轮播图案例，自己写的，只要修改图片就行。
JS特效实现图片自动播放并可控的效果
12-09
不多说了，实现方法请看下面代码。 代码如下： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8"/> <title>JS代码实现图片自动播放并可控的效果</title><base target="_blank" /> <link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/js/1/css/style.css"> <script type="text/javascript" sr
js的自动轮播和手动轮播
beibei_niao的博客
12-21 162
自动和手动轮播显示3张图片 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js创建轮播</title> <style> *{ margin:0; ...
【学会轮播图这一篇文章就足够啦】JS 网页轮播图详解 自动播放+手动播放
2401_84150046的博客
04-13 2455
正值金三银四招聘旺季，很多小伙伴都询问我有没有前端方面的面试题，特地整理出来赠送给大家！资料领取方式：点击这里前往获取交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。**深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
JS实现轮播图(自动+手动)
2401_84092322的博客
04-13 534
对这里有疑问的同学可以去我的上一篇讲动画函数封装的文章里了解一下。点击右侧按钮一次，图片往左播放一张，以此类推，左侧按钮同理。鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮。图片播放的同时，下面小圆圈模块跟随一起变化。鼠标不经过轮播图，轮播图也会自动播放图片。鼠标经过，轮播图模块，自动播放停止。callback();//回调函数写到定时器结束里面。点击小圆圈，可以播放相应图片。
分享一个手写轮播图的学习案例
weixin_43520364的博客
04-06 1094
首先确定需求。 做一个仿照淘宝首页的轮播图有以下需求： ①.鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮。 ②.点击右侧按钮一次，图片往左播放一张，以此类推，左侧按钮同理。 ③.图片播放的同时，下面小圆圈模块跟随一起变化。 ④.点击小圆圈，可以播放相应图片。 ⑤.鼠标不经过轮播图，轮播图也会自动播放图片。 ⑥.鼠标经过，轮播图模块， 自动播放停止。 确定需求之后先用HTML和CSS把结构搭建好，这个案例重点在于JavaScript的操作。 我在写代码的时候注释的都比较详细了，在这里就不讲了。 这个案例
原生JavaScript实现图片自动/手动轮播效果
这套代码的特点是支持手动和自动两种切换模式，用户可以通过编写纯JavaScript代码，无需依赖任何第三方库或框架，实现一个图片展示轮播图功能。该功能允许用户在一个网页上展示一组图片，并且可以通过预先设定的时间...
评论 19
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值