0
我有Jssor Slider,我想让左右两个箭头出现,并显示淡入淡出 - 当鼠标在2箭头上淡出 - 当鼠标不在时2个箭头淡出Jssor slider Transitions淡入淡出2箭头
任何建议
感谢
我有Jssor Slider,我想让左右两个箭头出现,并显示淡入淡出 - 当鼠标在2箭头上淡出 - 当鼠标不在时2个箭头淡出Jssor slider Transitions淡入淡出2箭头
任何建议
感谢
假设有一个箭头导航皮肤的皮肤\箭头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 -->
感谢您的帮助,但淡入淡出和不工作 – 2014-11-25 05:37:14
它的工作在我身边。请仔细检查代码。 – jssor 2014-11-25 05:58:37