原生JS如何实现带缓动效果的图片
这篇文章给大家分享的是有关原生JS如何实现带缓动效果的图片的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
成都创新互联主营平湖网站建设的网络公司,主营网站建设方案,手机APP定制开发,平湖h5小程序定制开发搭建,平湖网站营销推广欢迎平湖等地区企业咨询
HTML部分:
- 1
- 2
- 3
- 4
- 5
这部分比较简单,跟Tmall首页效果一样,几张图片,左下角是图片索引,并有一个半透明的遮罩层。
CSS部分:
body,ul,li{ margin:0; padding:0; } ul{ list-style:none; } #J-Slide{ width:600px; height:400px; position:relative; margin:50px auto; overflow:hidden; } #J-Slide .JSlide-list{ position:absolute; width:3000px; left:0; top:0; } #J-Slide .JSlide-list li{ float:left; } #J-Slide .JSlide-list li img{ width:600px; height:400px; } #J-Slide .JSlide-num{ position:absolute; left:0; bottom:0; height:30px; padding:5px; width:100%; z-index:10; } #J-Slide .JSlide-num li{ width:30px; height:30px; margin-left:10px; float:left; font-size:16px; color:white; background:#716584; line-height:30px; text-align:center; cursor:pointer; border-radius:15px; } #J-Slide .JSlide-mask{ position:absolute; left:0; background:black; bottom:0; width:100%; height:40px; opacity:0.3; filter:Alpha(opacity = 30); z-index:1; } #J-Slide .JSlide-num .current{ background:#B91919; }
CSS部分比较简单,直接用absolute定位。
JavaScript库部分:
(function(){ /* *参数说明: *id 必须 *picwidth 可选 *speed 可选 * *作者:artwl *出处:http://artwl.cnblogs.com */ var JCP_Slide=function(id,picwidth,speed){ if(!(this instanceof JCP_Slide)) return new JCP_Slide(id,picwidth,speed); var obj=document.getElementById(id), childs=obj.getElementsByTagName("ul"); this.author="artwl"; this.jslideList=childs[0]; this.jslideNums=childs[1].children; this.speed= speed || 5000; this.picwidth= picwidth || (obj.currentStyle ? parseFloat(obj.currentStyle.width) : parseFloat(document.defaultView.getComputedStyle(obj,null).width)); this.currentIndex=0; this.distance=this.picwidth; this.currentLeftPos=0; this.runHandle=null; this.len=this.jslideNums.length; } JCP_Slide.prototype={ bindMouse:function(){ var self=this; for(var i=0;i这个JS库是核心,入口有三个参数,***个是最外层的div的id(必须),第二个参数是图片宽度(可选),默认为最外层DIV宽度,第三个参数为自动切换的时间间隔(可选),默认为5秒。
bindMouse是绑定鼠标的悬浮和移出事件,autoRun是让图片正动切换,play方法调用了这两个方法。
easeOutCirc是一个先快后慢的缓动公式,transition是缓动函数,这两个方法的用法请参考司徒正美的博客:
调用示例:
window.onload=function(){ JCP_Slide("J-Slide").play(); };完整代码为:
View CodeNew Document
- 1
- 2
- 3
- 4
- 5
运行效果:
感谢各位的阅读!关于“原生JS如何实现带缓动效果的图片”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
文章名称:原生JS如何实现带缓动效果的图片
文章出自:http://myzitong.com/article/pgcgpj.html