摘要:一直以来做项目碰到轮播图我都是去网站上找现成插件拿来用,现成的插件是省时间,拿来改改尺寸改改参数就能直接用,是现在的插件确实很强大,对于我一个刚刚学习前端的人来说,牛人写的轮播我看懂也要花些功夫,更别说在工作中写出来,估计写出来以后,整个项
一直以来做项目碰到轮播图我都是去网站上找现成插件拿来用,现成的插件1是省时间,拿来改改尺寸改改参数
就能直接用,2是现在的插件确实很强大,对于我一个刚刚学习前端的人来说,牛人写的轮播我看懂也要花些功夫,
更别说在工作中写出来,估计写出来以后,整个项目都要因我延时了...
我做过的项目也不多,开始用的最多的就是bootstrap里面的轮播,具备最基础的功能,很适合我刚开始做项目用,
最近我无意发现了一个更好用的轮播件(Swiper)这个插件在手机上有点意思,他可以实现手指触摸拖拽,还可以
双指进行缩放,挺好用的,官网有中文的,上手挺容易的(你们还有什么好用的插件可以私信我^-^).
好了说正事 ,接触前端的应该都知道 轮播可以说刚开始学就必须应该
会的,不会那就太没面子了,面试问过我 ,我胸有成竹的叙述其实我心
里想着他要真让我拿出电脑写一个我还真的会蒙
今天下午有时间 ,我凭着用过这么多次的映像自己动手写了一个,真的是最最最最基础的轮播。
我开始想写那种无缝的轮播,我是这么写的
- 1
- 2
- 3
外层slider{width:500px;height:400px;position:relative;overflow:hidden;}, .main{ float:left;width:1500px;position:absolute;left:0;top:0;transition:all linear .5s} //一张图片宽500px; .mian>li{ float:left;}
像这样:
然后改变.main的left就可以了;我开始是这么想的,也这么做了,轮也能轮了,但是轮播图上index怎么弄,点击它
还要跳到对应的图片上,想了好久
我放弃了,(日后我会解决得)
还有一种轮播,可能你已经想到了 那种改变图片透明度的轮播,我当时想这个好写啊,同样能实现作用,于是....上码!
主要css .main>li{ position: absolute; top:0; left: 0; opacity: 0; transition: all linear .5s; }//三张叠放在一起
.main .active{ opacity: 1; } .index .active{ width:12px; height:12px; border-radius: 12px; background-color: red; }
就这段复用性贼差,处理效率贼低的代码我写了半天,
虽然效率低,但还好的是,我下次说我会的时候会比之
前更有底气
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/112994.html
摘要:一直以来做项目碰到轮播图我都是去网站上找现成插件拿来用,现成的插件是省时间,拿来改改尺寸改改参数就能直接用,是现在的插件确实很强大,对于我一个刚刚学习前端的人来说,牛人写的轮播我看懂也要花些功夫,更别说在工作中写出来,估计写出来以后,整个项 一直以来做项目碰到轮播图我都是去网站上找现成插件拿来用,现成的插件1是省时间,拿来改改尺寸改改参数 就能直接用,2是现在的插件确实很强大,对于我一...
摘要:老姚浅谈怎么学鉴于时不时,有同学私信问我老姚,下同怎么学前端的问题。撸码听歌,全局控制。 浅析用 js 解析 xml 的方法 由于项目上需要解析 xml,于是各种百度,然后自己总结了下各个主流浏览器解析 xml 的方法,只能是很浅显的知道他的用法,但是还没有深层次的研究。 装 X - 建立自己的斗图网站库 之前加过一个斗图群,看到很多经典的表情,然后就收藏到了 QQ, 迫于本屌丝开不起...
摘要:站在这个时间点上,我对自己之前三次失败的面试经历做了一次深度回顾。关于我第三次面试失败的经历,依然是与轮播图有关。当然,这次思特奇面试之旅,最后也是以失败告终,这也是我离进大厂最近的一次。 showImg(https://segmentfault.com/img/bVYQuP?w=528&h=513); 前言 时间的齿轮已经来到了2017年的11月份,距离2018年仅仅还剩下不到两...
阅读 2462·2021-11-15 18:14
阅读 1692·2021-10-14 09:42
阅读 3684·2021-10-11 10:58
阅读 3917·2021-10-09 09:44
阅读 2379·2021-09-26 09:55
阅读 2403·2021-09-24 10:38
阅读 2007·2021-09-04 16:48
阅读 3252·2021-09-02 15:21