十九、JS淡入淡出效果

一、思路

1.利用zIndex属性调整层级，同时搭配opacity透明度属性，利用定时器以及过度属性实现淡入淡出；

2.箭头切换以及索引圈均使用与前2个案例类似的办法实现；

 

二、步骤

1.构建基本结构样式

2.添加淡入淡出事件，封装为一个方法，定时器调用，由于已经有了前2个案例的基础，这里直接考虑到鼠标点击箭头切换时的传参问题；

默认right，从前向后淡，left从后向前淡；利用zIndex让图片循环成为最高层/最底层，然后只需控制最高层/最底层以及相邻的层的透明度即可实现淡入淡出效果；与jS简单图片预览中讲到的切换方式思维一致；

 

//淡入淡出事件
function shift(way) {
    for (var i = 0; i < imgg.length; i++) {
        var index = imgg[i].style.zIndex;
        if (way=="right") {
            index++;
            if (index==6) {
                imgg[i].style.opacity