热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

js实现轮播图效果纯js实现图片自动切换

这篇文章主要为大家详细介绍了js实现轮播图效果,图片自动切换,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了纯js实现图片自动切换的具体代码,供大家参考,具体内容如下

1.鼠标经过的时候左右两个小按钮会自动弹出,自动播放停止,点击左右小按钮可以切换图片;
2. 鼠标离开,恢复自动播放;
3. 点击下方中间几个小圆圈,也会自动切换图片;

源代码:

5.Js文件的代码

// 封装了一个动画js文件
function animation(obj,target,fn1){
 // console.log(fn1);
 // fn是一个回调函数,在定时器结束的时候添加
 // 每次开定时器之前先清除掉定时器
 clearInterval( obj.timer);
 obj.timer = setInterval(function(){
 // 步长计算公式 越来越小
 // 步长取整
 var step = (target - obj.offsetLeft) /10;
 step = step > 0 ? Math.ceil(step) :Math.floor(step); 

 if(obj.offsetLeft == target){
  clearInterval( obj.timer);
  // 如果fn1存在,调用fn
  if(fn1){
  fn1();
  }
 }else{
  // 每50毫秒就将新的值给obj.left
 obj.style.left = obj.offsetLeft +step +'px';
 }
 },30)
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。


推荐阅读
  • 如何在命令行中启动、停止和重启 Nginx 的详细指南
    如何在命令行中启动、停止和重启 Nginx 的详细指南 ... [详细]
  • Python 源代码文件应在何处进行编辑?[Python 常见疑问解答]
    Python 源代码文件的编辑有多种选择:1. 可以使用 Windows 自带的记事本进行简单编辑;2. 利用 Python 自带的 IDLE 集成开发环境;3. 采用功能更强大的第三方编辑器,如 Sublime Text、Visual Studio Code 等,这些编辑器通常具备语法高亮、自动补全等高级功能,能够显著提升开发效率。 ... [详细]
  • 题目链接:http://poj.org/problem?id=3083。题目描述:给定一个迷宫,其中 'S' 表示起点,'E' 表示终点,'#' 表示墙壁,'.' 表示可通行的道路。起点和终点均位于迷宫的边界上,并且保证存在唯一路径。任务是求从起点 'S' 到终点 'E' 的最短路径步数,且优先考虑向左转弯。通过深度优先搜索(DFS)和广度优先搜索(BFS)算法进行路径探索,分析两种方法的优劣及适用场景。 ... [详细]
  • 深入解析 Android 选择器与形状绘制技术
    本文深入探讨了 Android 中选择器(Selector)与形状绘制(Shape Drawing)技术的应用与实现。重点分析了 `Selector` 的 `item` 元素,其中包括 `android:drawable` 属性的使用方法及其在不同状态下的表现。此外,还详细介绍了如何通过 XML 定义复杂的形状和渐变效果,以提升 UI 设计的灵活性和美观性。 ... [详细]
  • 初探设计模式之代理模式:原理与应用解析
    在设计模式中,代理模式通过一个代理对象来控制对真实对象的访问。UML图展示了代理类(如MathProxy)维护了一个引用,使得代理能够访问实际的主题对象。代理模式不仅能够延迟初始化昂贵的对象,还能在访问前后添加额外的操作,如权限检查或日志记录。这种模式在远程服务调用、虚拟代理和智能引用等方面有广泛应用。 ... [详细]
  • HTML学习指南:全面掌握网页编程基础
    HTML学习指南:全面掌握网页编程基础 ... [详细]
  • 本周,我深入研究了 ECharts 插件的使用方法,整体感觉插件操作较为简便,但后台算法较为复杂。此外,我还学习了 MySQL 函数的新应用,进一步提升了数据库操作的灵活性。同时,分享了自己在 Python 书籍外借过程中的体验,总结了一些实用的借阅技巧和心得。 ... [详细]
  • 在BZOJ 2563中,阿狸与桃子进行了一场策略博弈游戏。该问题的时间限制为3秒,内存限制为128MB,目前已有97次提交记录。通过对游戏规则和策略的深入分析,本文探讨了双方在不同情况下的最优决策路径,并提出了高效的算法解决方案。 ... [详细]
  • CSS中的pointer-events属性详解与应用
    在CSS中,`pointer-events`属性是一个非常实用但常被忽视的功能。它主要用于控制元素是否响应鼠标事件。当一个元素覆盖在其他元素之上时,通过设置`pointer-events`属性,可以决定该元素是否能够接收鼠标点击、悬停等交互操作,从而实现更灵活的用户界面设计。例如,将`pointer-events`设置为`none`可以使元素透明地传递鼠标事件,方便实现复杂的叠加效果和交互逻辑。 ... [详细]
  • 构建高可用性Spark分布式集群:大数据环境下的最佳实践
    在构建高可用性的Spark分布式集群过程中,确保所有节点之间的无密码登录是至关重要的一步。通过在每个节点上生成SSH密钥对(使用 `ssh-keygen -t rsa` 命令并保持默认设置),可以实现这一目标。此外,还需将生成的公钥分发到所有节点的 `~/.ssh/authorized_keys` 文件中,以确保节点间的无缝通信。为了进一步提升集群的稳定性和性能,建议采用负载均衡和故障恢复机制,并定期进行系统监控和维护。 ... [详细]
  • 为了满足专业设计师的需求,我需要一个工具,能够将使用JQuery构建的动态页面转换为纯静态HTML,而无需引用任何JavaScript文件。该工具应具备模拟当前页面的功能,以确保在开发和测试过程中保持页面的完整性和一致性。此外,该工具还应支持高效的页面调试和优化,以便设计师能够快速验证和调整页面布局及样式。 ... [详细]
  • RDLC报表设计进阶:实现行分组功能详解
    在RDLC报表设计系列的第二部分中,我们将深入探讨行分组功能的实现。本文将基于前文的基础,继续介绍如何在demo1.rdlc界面中添加文本框,并详细讲解行分组的具体操作步骤和技巧。通过本文,读者将能够掌握如何高效地利用行分组功能,提升报表的可读性和数据展示效果。 ... [详细]
  • 本文详细解析了CSS背景属性的简写顺序,包括背景颜色、背景图像、背景重复方式、背景固定方式等关键要素,帮助开发者更好地理解和应用这一重要样式规则。通过具体示例和实际应用场景,文章深入探讨了每个属性在简写形式中的排列和作用,为前端开发提供了实用的参考。 ... [详细]
  • 指针超出边界:深入解析与防范措施
    在编程过程中,使用 `pNULL` 来判断遍历是否完成是一种不推荐的做法。本文深入分析了指针超出边界的问题,并提出了有效的防范措施,以确保代码的健壮性和安全性。通过详细探讨指针操作中的常见错误及其潜在风险,本文为开发者提供了实用的指导建议,帮助他们在实际开发中避免此类问题。 ... [详细]
  • 【Beta版】第四次Scrum会议纪要与进展更新
    本次Scrum会议由项目经理主持,于5月9日晚10点30分召开,持续15分钟。会议主要讨论了团队成员在过去一天的工作进展及下一步计划。具体而言,木鬼负责撰写博客并整理相关文档,而swoip则专注于改进用户界面的设计与功能。此外,团队还对当前的任务列表进行了更新,确保各项任务按时推进。 ... [详细]
author-avatar
幼儿之家燕郊_880
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有