简易图片轮播效果

      明天是回学校的最后一天了,拿了毕业证书那我就彻底毕业了。这么一晃竟然就是四年,有喜有悲,幸好我今天能和各位同仁一起走上前端开发这条道路,还是觉得这四年没有白费吧。毕业归毕业,我们的前端开发之路一刻也不能停留,于是晚上想着写点什么。。。想到了图片轮播这个效果之前没做过于是试着做了一下。图片轮播我的第一反应是总得有个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