简易图片轮播效果

      明天是回学校的最后一天了，拿了毕业证书那我就彻底毕业了。这么一晃竟然就是四年，有喜有悲，幸好我今天能和各位同仁一起走上前端开发这条道路，还是觉得这四年没有白费吧。毕业归毕业，我们的前端开发之路一刻也不能停留，于是晚上想着写点什么。。。想到了图片轮播这个效果之前没做过于是试着做了一下。图片轮播我的第一反应是总得有个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滚动起来。哎，罗七八嗦的一堆，无非是一个思路切换的过程，实现的代码再贴出来感觉也没有太大的意思，不贴了吧。前两天看到一篇文章，很深刻的告诫每一个前端开发的人，如果你想在这个领域有所建树的话，踏实、深入的了解我们前端的语言是基础，深入了解吧，我觉得我往往太停留于表面了。