Jssor 滑块 Transitions 淡入淡出 2 箭头答案

【问题标题】：Jssor slider Transitions fade in and fade out the 2 arrowJssor 滑块 Transitions 淡入淡出 2 箭头
【发布时间】：2014-11-24 20:51:38
【问题描述】：

我有 Jssor Slider，我想让左右 2 个箭头出现并显示淡入和淡出 - 当鼠标在 2 箭头淡入 - 当鼠标移出 2 个箭头时淡出

任何建议

谢谢

【问题讨论】：

标签： slider fadein fadeout jssor arrows

【解决方案1】：

鉴于有一个箭头导航器皮肤“skin\arrow-01.source.html”，请在此作业中添加以下 css 代码。

        #slider1_container .jssora01l, #slider1_container .jssora01r {
            opacity: 0;
        }
        #slider1_container:hover .jssora01l, #slider1_container:hover .jssora01r {
            opacity: 1;
        }
        .jssora01l, .jssora01r {
            -webkit-transition: opacity 0.25s linear;
            -moz-transition: opacity 0.25s linear;
            -o-transition: opacity 0.25s linear;
            transition: opacity 0.25s linear;
        }

最后你会得到如下箭头导航皮肤，

    <!-- Arrow Navigator Skin Begin -->
    <style>
        /* jssor slider arrow navigator skin 01 css */
        /*
        .jssora01l              (normal)
        .jssora01r              (normal)
        .jssora01l:hover        (normal mouseover)
        .jssora01r:hover        (normal mouseover)
        .jssora01ldn            (mousedown)
        .jssora01rdn            (mousedown)
        */
        .jssora01l, .jssora01r, .jssora01ldn, .jssora01rdn
        {
            position: absolute;
            cursor: pointer;
            display: block;
            background: url(../img/a01.png) no-repeat;
            overflow:hidden;
        }
        .jssora01l { background-position: -8px -38px; }
        .jssora01r { background-position: -68px -38px; }
        .jssora01l:hover { background-position: -128px -38px; }
        .jssora01r:hover { background-position: -188px -38px; }
        .jssora01ldn { background-position: -8px -38px; }
        .jssora01rdn { background-position: -68px -38px; }

        #slider1_container .jssora01l, #slider1_container .jssora01r {
            opacity: 0;
        }
        #slider1_container:hover .jssora01l, #slider1_container:hover .jssora01r {
            opacity: 1;
        }
        .jssora01l, .jssora01r {
            -webkit-transition: opacity 0.25s linear;
            -moz-transition: opacity 0.25s linear;
            -o-transition: opacity 0.25s linear;
            transition: opacity 0.25s linear;
        }
    </style>
    <!-- Arrow Left -->
    <span u="arrowleft" class="jssora01l" style="width: 45px; height: 45px; top: 123px; left: 8px;">
    </span>
    <!-- Arrow Right -->
    <span u="arrowright" class="jssora01r" style="width: 45px; height: 45px; top: 123px; right: 8px">
    </span>
    <!-- Arrow Navigator Skin End -->

【讨论】：