位置: 编程技术 - 正文

原生JS实现旋转木马式图片轮播插件(js旋转函数)

编辑:rootadmin

推荐整理分享原生JS实现旋转木马式图片轮播插件(js旋转函数),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:js实现旋转动画,js页面旋转效果,js让元素旋转,js让元素旋转,js实现旋转动画,js让元素旋转,js让元素旋转,js实现旋转动画,内容如对您有帮助,希望把文章链接给更多的朋友!

本人自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的,淡入淡出切换的。现在想做一个酷一点的放在博客或者个人网站,到时候可以展示自己的作品。逛了一下慕课网,发现有个旋转木马的jquery插件课程,有点酷酷的,于是就想着用原生JS封装出来。做起来才发现,没有自己想象中的那么容易。。。不??铝耍?步庖幌率迪止?贪伞?/p>

二、效果

由于自己的服务器还没弄好。在线演示不了(ORZ...),只能放一张效果图了。

从图片上还是可以看出大概效果的,我就不多说了。想看真实代码效果的,欢迎到我的github上面download代码,别忘了给我的github项目点个星星噢^_^

三、实现过程

html结构

这个结构和一般轮播的html代码结构是一样的,稍有不同就是,主轮播div上面有一个data-setting的属性,这个属性里面就是一些轮播效果的参数。参数的具体意义稍后再讲解。

css部分的代码就不贴了,最重要就是要注意元素的绝对定位,由效果图可以看出来,每张图片的位置、大小都不一样,所以这些都是通过js控制的,因此需要绝对定位。下面重点讲一下js实现过程。

JS实现过程

下面讲几个JS的关键步骤,做好了这几个步骤之后,应该就没有什么难点了。

①默认参数

既然是封装插件,那么肯定会有一些参数的默认值需要配置的啦。这个插件中,主要有如下参数:width:, //幻灯片区域的宽度height:, //幻灯片区域的高度carrouselWidth:, //幻灯片第一帧的宽度carrouselHeight:, //幻灯片第一帧的高度scale:0.9,//记录显示比例关系,例如第二张图比第一张图显示的时候宽高小多少autoPlay:true,//是否自动播放timeSpan:,//自动播放时间间隔verticalAlign:'middle' //图片对齐方式,有topmiddlebottom三种方式,默认为middle

②封装对象

因为一个网站可能有多个地方都会用到同一个轮播插件,所以封装很关键。定义了这个对象之后,如果给对象定义一个初始化方法是可以创建多个对象的,只需要把所有类相同的dom传进去就可以了。所以,我的初始化方法如下:

原生JS实现旋转木马式图片轮播插件(js旋转函数)

这样的话,我在window.onload的时候,调用Carrousel.init(document.querySelectorAll('.carrousel-main'));这样就可以创建多个轮播啦!

③初始化好第一帧的位置参数

因为,第一帧之后的所有帧的相关参数都是参照第一帧来定义的,因此,定义好第一帧很关键。

这里,就是new对象的时候,就到dom结点中获取data-setting参数,然后更新默认参数配置。这里有个地方需要注意的,获取dom的参数不能直接以赋值的方式更新默认参数,因为用户配置参数的时候,不一定会所有参数都配置一次。如果直接赋值而用户刚好不是所有参数都配置的话就会造成参数丢失。这里我是自己写了一个类似JQuery中的$.extend方法的对象扩展方法来更新参数的。具体就不列举了,感兴趣的可以去下载。

④其他图片位置设置

这里的图片实际上就是把除第一张之外的图片,平均地分到左右两则,而左边的图片位置和右边的是不同的,因此需要分别配置:

左边的设置方法类似且更为简单,就不细说了。

⑤旋转时所有图片的位置大小调整

这一步很关键,点击右边按钮下一张的即为左旋转,而点击左边按钮上一张即为右旋转。此时,我们只需要把所有的图片看成一个环形那样,点击一次,换一次位置即完成旋转。具体为左旋转的时候,令第二张的参数等于第一张,第三张等于第二张...而最后一张等于第一张即可。右旋转的时候,令第一张的参数等于第二张,第二张的参数等于第三张...而最后一张的参数等于第一张即可。

这里就说说左旋转吧

这里的旋转,如果不使用一些动画过度,会显得很生硬。但是原生JS并没有动画函数,这里我是自己写了一个模仿的动画函数。其原理就是获取dom原来的样式值,与新传入的值比较。用一些方法定义一个速度。我这里的速度就是用其差值除.然定义一个计时器,参考了一下jquery源码里面的时间间隔为每毫秒执行一次。然后才原来的样式值每次加上speed后等于传入的值的时候清楚计时器即可。具体可以看这里。

好啦,关键的地方都差不多啦,如果明白这些过程应该就很容易了!

四、总结思考

总结:

个人感觉这还是一个比较好理解的插件。如果能结合JQuery来做就相当简单了。但是用原生来写的话,还是有一些不那么流畅的感觉。应该是自定义动画比不上JQuery封装好的动画吧。

还有,这个插件因为图片需要平均分到左右两边,于是对于偶数数量的图片来说,这里用的方法是克隆第一张,然后加到最后,形成一个奇数。

思考:

如果说有bug的话,那就是我定义了一个rotateFlag的标志去判断当前能否旋转,就是预防快速点击的时候跟不上。我在按下的时候把rotateFlag设置为false,然后在动画结束后再把rotateFlag设置为true,但是好像作用并不明显,希望有关大神可以指教一下,大家共同进步。

标签: js旋转函数

本文链接地址:https://www.jiuchutong.com/biancheng/373524.html 转载请保留说明!

上一篇:第四章之BootStrap表单与图片

下一篇:第三章之Bootstrap 表格与按钮功能(第三章之一、使用二手设备降低生产成本读后感)

  • 增值税和所得税地方留存比例
  • 结转所得税的会计分录是什么
  • 免抵退和免退税 区别 委托
  • 装卸费发票怎么备注
  • 盈利幼儿园和非盈利幼儿园的政策
  • 贴现利息应计入什么费用
  • 普票丢失了能作废重开吗
  • 资产负债和所有者权益三要素反映企业的
  • 资本公积账务
  • 增值税预缴税金交错了怎么办
  • 报销退回多余款项怎么开收据
  • 销售商品发生的运费计入什么科目
  • 个贷系统平账户
  • 用友u8怎样查询上个月凭证
  • 营改增后建筑公司自建行为所得税
  • 国税局网上申报
  • 预缴增值税预缴的城建税怎么申报
  • 补记以前年度往来款
  • 施工单位的项目
  • 给员工发的慰问短信
  • 金蝶增加银行存款账户,期间不对
  • "专项储备"在合并报表层面如何处理?
  • 管理费用与税金的比例
  • basic run
  • 会计折算是什么意思
  • 在建工程变更建设单位
  • 怎样调整以前年度多计的收入
  • 我想测试一下网速
  • wifi信号弱了
  • PHP:spl_autoload_register()的用法_spl函数
  • 文件上传漏洞及解决方案
  • php处理数组的函数
  • 顺流交易合并抵消
  • 今日清明是清明开始还是结束
  • wordpress转化为html
  • 公司支付工伤赔偿,是先签字还是先打钱
  • div+css导航栏
  • 福利费专用发票如何账务处理
  • ChatGPT强化学习大杀器——近端策略优化(PPO)
  • vue关闭路由
  • 滴滴打车老板起源故事
  • 残保金员工人数怎么算
  • 先款还是先票
  • 材料发出会计科目
  • 其他应收款检查表怎么填
  • 出口免抵退转免税
  • 企业贷款利息是多少
  • 供货方代垫运费会计分录
  • 帝国cms移动端
  • 其他应收款可以直接平账吗
  • 工业生产的含义
  • 平均股东权益在哪里看
  • 金税四期有什么变化
  • 哪些项目的进项不含税
  • 基本户能转账吗现在
  • 计算税前利润时 是否考虑资金成本
  • 工资发多了可以追回吗
  • 房地产企业取得政府补助
  • 如何理解出口退税的意义
  • 企业筹建期的开办不少于多少年
  • 其他债权投资有没有减值准备
  • 银行借款一年按多少天计算
  • mysql主从复制作用
  • xp系统安装惠普1010教程
  • 怎么更改win7
  • win10raw预览
  • win7用户在哪
  • linux安装gdb命令
  • windows安装软件需要管理员权限
  • win7系统播放器在哪
  • linux 使用技巧
  • opengl光照设置
  • Knockout visible绑定使用方法
  • jqueryui
  • 企业未代扣代缴个税能退税吗
  • 取消税控盘服务费
  • 平板电脑购物
  • 房产证是有开发商办吗
  • 营业税纳税申报时间
  • 增值税纳税申报表附列资料(三)
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设