JQuery шексіз сырғытпасы - MacApp дүкенін модельдеу

Егер Mac app дүкеніндегі жүгірткіні кім білсе, онда бұл қайтадан жасалды. Бірақ үш мәселе.

  • Онда оң жақтағы жүгірткі мен негізгі фейдер арасында анимация кідірісі болуы керек
  • insertAfter функциясы ештеңе жасамайды
  • Слайдер шексіз циклде емес

I have set up a fiddle for testing if anyone can solve it. http://jsfiddle.net/Z5uER/2/

$(document).ready(function(){

    $('.sismain a').css('opacity', 0);

    var slideqnt = $('.sismain a').length;
    var slidecur = 0;
    var slidelay = 0;
    var slidemove = 0;
        $('.sismain a').each(function(){
            $(this).delay(slidelay).animate({opacity: 1,  leaveTransforms:true}, {duration:2000, queue:true});
            slidemove -=167;
            $('.siscolin').delay(slidelay - 2000).animate({top: slidemove,  leaveTransforms:true}, {duration:2000, queue:true});
            slidelay += 6000;
            $('.siscolin a:first').insertAfter('.siscolin a:last');
            $(this).delay(slidelay).animate({opacity: 0,  leaveTransforms:true}, {duration:2000, queue:true});
        });
});
0
Дәл емес. Қазір ол тұрақты, бірақ шексіз жүгірткіні жұмысқа алмадым. Оның орнына ол жоғарыдан жайлап сырғып шығады
қосылды автор Robin Knight, көзі
Сіз мұны бітірдіңіз бе? Бұл керемет көрінеді және дәл іздеп жүрмін. Кешірім жасау үшін дереу көмексіз үшін кешірім сұрау :(.
қосылды автор user1047309, көзі

1 жауаптар

Мен осындай функционалдылықты жасадым. Мүмкін, мен бұл үшін плагин жазамын.

Div-тің барлық өлшемдерін дұрыс мәндерге (және сценарий ішіндегі абсолютті позициялау) орнатқаныңызға көз жеткізіңіз:

HTML

<div class="slider">
    <div class="slides">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="thumbs">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>
pause

CSS

body {
    margin: 20px;
}
.slider {
    position: relative;
    width: 240px;
    height: 90px;
    overflow: hidden;
}
.slides div {
    position: absolute;
    top: 0;
    left: 0;
    width: 180px;
    height: 90px;
    z-index: 1;
    display: none;
}
.slides div.first-child {
    z-index: 2;
}
.thumbs {
    position: absolute;
    width: 60px;
    height: 90px;
    right: 0;
    top: 0;
}
.thumbs div {
    width: 60px;
    height: 30px;
    background-color: #f00;
    position: absolute;
    top: 0;
    right: 0;
}
#pause {
    background-color: #888;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    font-family: Arial;
    border: 1px solid #000;
    padding: 10px;
    margin-top: 20px;
    display: inline-block;
}

JavaScript

var intval = "";
var numberOfSlides = $('.slides > div').length;
var counter = 0;
var thumbs = $('.thumbs div').toArray();

$('.slides div:eq(0)').addClass('first-child');

$(thumbs).each(function(i,el){
    $(this).css({top: 90-(i*30+30) + 'px'});
});

var doShit = function() {
    if(counter == 0) {
        $('.slides div').eq((numberOfSlides-1)).fadeOut('fast');
    }
    else {
        $('.slides div').eq((counter-1)).fadeOut('fast');
    }

    $(thumbs).each(function(i,el){
        $(this).animate({top: '+=30'}, 1000, function(){
            if(i==0) {
                $(this).css({'top': '-60px'});
                            thumbs.push(thumbs.shift());
            }
        });
    });

    $('.slides div').eq(counter).fadeIn('fast');

    if(counter < (numberOfSlides-1)) {
        counter++;
    }
    else {
        counter=0;
    }
};

var start_Int = function() {
    if(intval==""){
        intval=window.setInterval(function() { doShit(); },2000);
    } else {
        stop_Int();
    }
};

var stop_Int = function() {
    if(intval!="") {
        window.clearInterval(intval);
        intval="";
    }
};

start_Int();

Fiddle: http://jsfiddle.net/dirkpennings/kf3v8/1/

Бұл көмектеседі деп үміттенемін.

2
қосылды
Керемет ... Кешігу үшін кешірім сұраймын. Бұл менің жасағанымнан гөрі жақсы жұмыс істейді ... жақсы жасалды
қосылды автор Robin Knight, көзі