本文探讨了如何实现在网页滚动时保持上一张图片显示，同时实现下一张图片淡入效果。通过CSS3动画和JavaScript定时器，作者分享了具体代码示例，并提供了关于解决滚动过渡问题的思路。
从右开始倒是实现了，但是想不通怎么让上一张图片在滚动的同时还存在，(看看怎么解决)
*{
margin: 0;
padding: 0;
}
ul,li{
list-style-type: none;
}
ul{
width:100%;
height:400px;
overflow: hidden;
position: relative;
}
li{
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
overflow: hidden;
}
img{
width: 100%;
height: 100%;
}
li div{
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
li .fadeInRight {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
transition: 2s ease-in-out;
z-index: 3;
}
;
$(function() {
var li = $(".lunBoBox li")
var aa = 0;
var liWidth = $(".lunBoBox li").width()
var timer = setInterval(function() {
aa++;
if (aa >= li.length) {
aa = 0;
}
move()
}, 3000)
function move() {
$(".lunBoBox li").find('div').removeClass('fadeInRight')
$(".lunBoBox li").eq(aa).find('div').addClass('fadeInRight')
}
})
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
