Question

我一直试图找到一个同时淡出和滑动的jQuery Slider但到目前为止没有成功，所以我决定尝试创建自己的。好吧，到目前为止，我已经设法让它滑动并且几乎没有消失，我几乎没有意思是在更大的屏幕中看起来内容可能会闪烁。

这是我的 HTML ：

<div id="slider">
    <div class="slide">
        <h1>A Phrase</h1>
    </div>
    <div class="slide">
        <h1>A Phrase</h1>
    </div>
    <div class="slide">
        <h1>A Phrase</h1>
    </div>
</div>

这是我的 jQuery ：

var slider = $('#slider .slide'),
    winWidth = $(window).width();

slider.css({
    width: winWidth
});
$(window).resize(function(){
    winWidth = $(window).width();
    $(args).css({
        width: winWidth
    });
});

var slideW = slider.width(),
    slidesQty = slider.length,
    sliderFullW = slidesQty * slideW,
    slideMvCheck = winWidth/2;

$('#slider').css({
    width: sliderFullW
});

function cycleSlides(){
    $('#slider').animate({
        left: -winWidth
    }, {duration: 2000, queue: false}).fadeOut(700).fadeIn(2000, function(){
        $('#slider .slide:first-child').appendTo('#slider');
        $('#slider').css({left: 0});
    });

}

var autoSlide = setInterval(function () {
    cycleSlides();
}, 4000);

我需要帮助调整代码，在过去的两天里我尝试了很多不同的事情，我已经没有想法了，而且我对jQuery不是很好。

Answer 1

所以无论如何我都对它有所了解（见评论）并从中做出了这样的结论：

http://codepen.io/anon/pen/mJyBgj?editors=011

var gate = $(window);
var slider = $('#slider');
var slide = $('.slide');
var winWidth = gate.width();

slide.css({width: winWidth});

gate.resize(function() {
    winWidth = gate.width();
    slide.css({width: winWidth});
});

var slideW = slide.width(),
slidesQty = slide.length,
sliderFullW = slidesQty*slideW,
slideMvCheck = winWidth/2;

slider.css({width: sliderFullW});

function cycleSlides() {

    $('.slide').eq(0).animate({opacity: 0}, 700);
    $('.slide').eq(1).delay(700).animate({opacity: 1}, 2000);

    slider.animate({left: -winWidth}, 2000, function() {
        $('.slide').eq(0).appendTo(slider);
        slider.css({left: 0});
    });
}

var autoSlide = setInterval(function() {
    cycleSlides();
}, 4000);

使用淡入淡出的一个棘手的问题是，当不透明度为零时，它将隐藏元素，将其从文档流中取出（并干扰）。所以我把它变成了不透明动画（保持物理尺寸不变）。希望更接近预期。添加了一些CSS来为除第一张可见幻灯片之外的所有幻灯片设置不透明度：

.slide:not(:first-of-type) {
opacity: 0;
}

jQuery Slider同时淡出和滑动

1 个答案: