Question

这可能很简单。一切正常，这是一个水平滑块，可以一个接一个地滑动图像。问题是，一个图像向上滑动，但一旦图像向上滑动，则启动前一个图像。我的问题是。如何将其链接起来，使其向上滑动，但在最后一个之后看到另一个向上滑动。

此功能可在最后一个LI的末尾移动完成的幻灯片。

function cloneView(){

$('.complete').each(function(){
$(this).clone().insertAfter('.slide_img ul li:last').addClass('slides',function(){
    //$('.slides').css({display : "block"});
                            }).removeClass('complete');
$('.complete').first().remove();
  });

 }

此函数检查有多少LI（totalSlides）。它还会滑动当前的li并将其设置为class =“complete”（这就是cloneView知道移动它的方式）。

$(function () {
  var slideS = $('.slide_img ul li');
  var comp = $('.slide_img ul li.viewing');
  slideHeight = $('.slide_img').height();
  totalSlides = slideS.length;
  slideLength = totalSlides * slideHeight;
  slideS.addClass('slides').css({
    display: "none"
  });
slideS.first().addClass('viewing').removeClass('slides').css({
    display: "block"
});
slideS.last().addClass('last_img').removeClass('slides');

slideInterval = setInterval(function () {
    $('.viewing').delay(1000).slideUp("slow", function () {
        $(this).addClass('complete').removeClass('viewing');
        $(this).next('li').addClass('viewing', function () {
            $(this).removeClass('slides').effect('slide', {
                direction: 'down',
                mode: 'show'
            });
            cloneView();
        });

    });


}, 10000);
});

我打算把它变成一个插件（尽管我确信它们有数百个）。这是jsfiddle。

Answer 1

这是一种更轻松的方式来做你想做的事情

http://jsfiddle.net/LCDXj/3/

确保通过CSS只能看到.current-slide类：

.slide_img {
    height: 445px;
    overflow: hidden;
    position: fixed;
    text-align: center;
    top: 60px;
    width: 100%;
}
.slide_img ul li img {
    width: 100%;
}
.slide_img ul li{
    position: relative;
    display: none;
}
.slide_img > ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
}

.slide_img ul li.current-slide
{
    display: block;
}

将滑块中的第一个元素设置为.current-slide
每隔X秒，向上滑动当前幻灯片，然后将其附加到后面清单
排队后立即滑动第一个动作向上滑动，也排队动作以滑动下一张幻灯片 DOM结构向下。

$(function()
{
    var slideS = $('.slide_img ul li');
    slideHeight = $('.slide_img').height();
    totalSlides = slideS.length;
    var imgSize = $('.slide_img ul li img').height();
    slideLength = totalSlides * slideHeight;

    slideS.first().addClass('current-slide');

    slideInterval=setInterval(function()
    {
        slideS.filter('.current-slide').slideUp(function()
        {
            $(this).appendTo($(this).parent()).removeClass('current-slide');
        }).next().slideDown().addClass('current-slide');;
    }, 5000);
});

要注意的是，我正在做的事情不是因为我不是在等第一张幻灯片完成滑动以开始滑动下一张幻灯片。

此外，通过简单地将元素追加到<ul />的末尾，我们不需要担心任何类型的花哨克隆。

按顺序链接此效果

1 个答案: