博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
简易图片轮播效果
阅读量:6704 次
发布时间:2019-06-25

本文共 1362 字,大约阅读时间需要 4 分钟。

      明天是回学校的最后一天了,拿了毕业证书那我就彻底毕业了。这么一晃竟然就是四年,有喜有悲,幸好我今天能和各位同仁一起走上前端开发这条道路,还是觉得这四年没有白费吧。毕业归毕业,我们的前端开发之路一刻也不能停留,于是晚上想着写点什么。。。想到了图片轮播这个效果之前没做过于是试着做了一下。图片轮播我的第一反应是总得有个ul来存放图片吧,图片横着放好以后怎么让他滚动起来呢?css这边的思路我一开始是用ul的margin-left来做,比如整个ul的宽度是400,margin-left:-400px;就能让整个ul隐藏在左边,用js判断一下是不是达到了最左边,到了以后让margin-left:400px;这样整个ul又处于最右边了。我自觉地思路挺好,没想到犯了一个低级错误:当ul的margin-left为400px的时候,整个ul已经被压扁了,你如果试着看一下的话就发现一开始所有的li是竖着排列的,当margin-left逐渐变小的时候li才尽可能的横着排列,于是我试着让ul拥有一个固定的width,没想到还是会因为margin-left太大而被压扁,width形同虚设,于是这个方案被抛弃了。接着想到了position:absolute,我就遇到了一个比较不理解,明天要来探究的问题:ul绝对定位以后,当设置了正数的left时,我发现在不为ul设置width固定宽度的情况下,ul的宽度竟然是和left相关的,也就是说绝对定位和margin-left都可以让不设置width的ul根据left和margin-left来调整宽度!!!我觉得ul既然已经绝对定位了那么已经脱离文档流了,如果left太大的话只能是多余的部分被隐藏啊,怎么跑到下一行去了呢?我接着用一个不设置宽度,绝对定位的div来做测试,发现这次就符合我的想法了,如果left比较大的话是会把多余的部分隐藏的,这就是绝对定位我认为是。其实方案倒是也简单的:把ul加一个固定宽度就行了。再加上js中的setInterval,一个简单的轮播效果也就露出点雏形了,但是问题在于哪里呢,真正的轮播应该是那种,一个元素在左边被彻底隐藏以后应该很快就在右边重新出现,每个元素都这样以后就能循实现环播放,于是接着改。我一开始想那要不就再加一个有相同内容的ul?当ul1滚动了一半的时候我让ul2出现,也开始滚动起来,这个应该可以做,但是html增加了一倍,真心觉得有点戳,我于是简单实现了一下就放弃了。于是想到现在这个方案:让ul中的li实现绝对定位,每个元素都滚自己的,滚到最左边的时候就各自在右边出现,这样循环的思路就很清晰了, 但是我写的js性能上损失可能是非常大的,因为我是让每一个图片元素都有自己的setInterval,其实更好的方案是在一个setInterval中让所有的img滚动起来。哎,罗七八嗦的一堆,无非是一个思路切换的过程,实现的代码再贴出来感觉也没有太大的意思,不贴了吧。前两天看到一篇文章,很深刻的告诫每一个前端开发的人,如果你想在这个领域有所建树的话,踏实、深入的了解我们前端的语言是基础,深入了解吧,我觉得我往往太停留于表面了。

转载于:https://www.cnblogs.com/xuchaosheng/p/3147450.html

你可能感兴趣的文章
上机题目(0基础)- Java网络操作-打印网页(Java)
查看>>
MySQL 查看用户授予的权限
查看>>
JS设置cookie、读取cookie、删除cookie
查看>>
webpack 通用模块(每个页面都用到的js)编译
查看>>
python进行数据分析------相关分析
查看>>
Python数据分析(二): Numpy技巧 (4/4)
查看>>
菜鸟学Struts——I18N对国际化的支持
查看>>
LAMP架构介绍MySQL、MariaDB介绍 MySQL安装
查看>>
Spark读取文件
查看>>
uiautomator2 使用Python测试 Android应用
查看>>
mysql建表以及列属性
查看>>
【转】IT业给世界带来的危机
查看>>
UWP Composition API - GroupListView(一)
查看>>
python模块和类的通用转换规则(2),三步转oo
查看>>
reactive programming
查看>>
React native 环境搭建遇到问题解决(android)
查看>>
模式识别hw2-------基于matconvnet,用CNN实现人脸图片性别识别
查看>>
pandas判断缺失值的办法
查看>>
如何将svg转换为xaml
查看>>
在瀚海上的ID
查看>>