轮播图再探

左右滚动轮播图：

第一：html和css布局，将轮播的图片拼接为一个横向的长的图片第二：js通过定时器来设置图片的左右滑动，需要有一个图片的序号来控制图片滑动的距离。

css代码

.photo-frame{ position: relative; width:1200px; /*height: 535px;*/ overflow: hidden; } .gallary{ position: absolute; list-style: none; width: 6000px; left: 0; } .gallary li{ float:left; }

html代码

<div class="photo-frame"> <ul class="gallary"> <li><img src="1.jpg" alt=""></li> <li><img src="2.jpg" alt=""></li> <li><img src="3.jpg" alt=""></li> <li><img src="4.jpg" alt=""></li> <li><img src="5.jpg" alt=""></li> </ul> </div>

当将.gallary设置为position: absolute;的时候，.gallary脱离稳定流，导致.photo-frame的高度为零,此时.photo-frame又由于被设置为overflow: hidden,所以此时不加高度就会使得.gallary不可见。

如果不重置ul和li的margin和padding，那么这两个默认的样式会让元素的位置不符合我们css设置的预期。

transition-duration这个属性在已有的css样式发生改变的时候应用。如果之前css没有设置一个样式，然后后面通过js设置了这个样式，那么在这时这个属性是不会运用的。 比如：一开始不设置.gallary的 css 的 left 样式，然后通过 js 设置了这个css样式的时候，假如transition-duration: 2s,那么第一次是不会有过度的效果的，样式会直接一步到位，但是之后再改变 left 属性的时候transition-duration属性的设置就会起作用了。

无缝轮播

如何解决最后一张图片显示后第一张图片从右边向左滑过来显示而不是整张图片向左滑到第一图片？？也就是无缝轮播？？

解决方案：在所有图片的最后添加一张和第一张一样的图片，这样当显示完最后一张的时候，将包含所有图片的ul的 left 瞬间置为 0，那么由于最后一张和第一张的图片一样，所以不会有闪烁的效果，接下继续轮播第二张图片就行。

$(function() { let index = 0; setInterval(function() { if(index === 5){ $('.gallary').css({ left: 0 }); index = 0; } $('.gallary').animate({ left: -1200*(index+1) },1200); index += 1; }, 1000); });