改变opacity实现图片轮播

这里实现原理我就不详细述说了，主要是通过改变图片的opacity，利用fadeIn和fadeOut来实现过渡效果，使切换不会显得很突兀。
但是我在这里遇到了一个问题，让我纠结了一段时间。问题是，我发现页面初始化的时候首屏切换并没有过渡效果，仅仅是直接切换了。我想了很久，以为是我的index的初始值不对，但发现根本不是这个问题。最后，终于发现，原来是我的样式的问题，我将所有的图片都设置为display:block;所以首屏切换根本没有过渡效果，将display改为none就可以了。这个问题很简单，但是我当时就是一直没想到。 

还有一个问题是，因为我将包裹图片的li标签都设置为绝对定位，所以首屏最开始显示的是图片堆叠后的最后一张图片，我将第一张图片的z-index设置更大一些便可以了。

完整的源码如下：

xml:

<ul class="sl-cont">
    <t t-foreach="images" t-as="image">
        <li class="sl-panel">
            <a t-att-href="image[1]">
                <img t-att-src="image[0]" />
            </a>
        </li>
    </t>
</ul>
<div class="sl-page">
    <a href="javascript:;" class="sl-prev"><</a>
    <a href="javascript:;" class="sl-next">></a>
</div>

css:

.sl-cont {
        position: relative;
        widt