Question

我使用以下gsap / jquery脚本构建了幻灯片。寻找一种方法来扩展脚本以添加导航箭头和分页。

感谢任何帮助。

<script>
$(function(){

                var $slides = $(".slide");
                var $slides_text = $(".slide2");
                var currentSlide = 0;
                var stayTime = 5;
                var slideTime = 1.3;

                TweenLite.set($slides.filter(":gt(0)"), {opacity:0,display:'none'});
                TweenLite.set($slides_text.filter(":gt(0)"), {opacity:0,display:'none'});
                TweenLite.delayedCall(stayTime, nextSlide);

                function nextSlide(){                   
                        TweenLite.to( $slides.eq(currentSlide), slideTime, {opacity:0,display:'none'} );
                        TweenLite.to( $slides_text.eq(currentSlide), slideTime, {opacity:0,display:'none'} );
                        currentSlide = ++currentSlide % $slides.length;     
                        TweenLite.to( $slides.eq(currentSlide), slideTime, {opacity:1,display:'block'} );
                        TweenLite.to( $slides_text.eq(currentSlide), slideTime, {opacity:1,display:'block'} );
                        TweenLite.delayedCall(stayTime, nextSlide);
                }

            });
</script>

Answer 1

我回答了自己的问题。弄清楚如何做下一个和上一个按钮+分页。如果有人需要Gsap的工作幻灯片，这里是脚本。

          $(function(){

                var $slides = $(".slide");
                var currentSlide = 0;
                var stayTime = 10;
                var slideTime = 1.3;
                var numberOfSlides = $slides.length -1;

                TweenLite.set($slides.filter(":gt(0)"), {opacity:0,display:'none'});
                TweenLite.delayedCall(stayTime, nextSlide);

                function nextSlide(){                   
                        TweenLite.to( $slides.eq(currentSlide), slideTime, {opacity:0,display:'none'} );
                        currentSlide = ++currentSlide % $slides.length;     
                        TweenLite.to( $slides.eq(currentSlide), slideTime, {opacity:1,display:'block'} );
                        TweenLite.delayedCall(stayTime, nextSlide);
                }

                $('.go-next').click(function() {
                        TweenLite.killDelayedCallsTo(nextSlide);
                        TweenLite.to( $slides.eq(currentSlide), slideTime, {opacity:0,display:'none'} );
                        currentSlide = ++currentSlide % $slides.length;     
                        TweenLite.to( $slides.eq(currentSlide), slideTime, {opacity:1,display:'block'} );
                });

                $('.go-prev').click(function() {
                        TweenLite.killDelayedCallsTo(nextSlide);
                        TweenLite.to( $slides.eq(currentSlide), slideTime, {opacity:0,display:'none'} );
                        currentSlide = --currentSlide % $slides.length;     
                        TweenLite.to( $slides.eq(currentSlide), slideTime, {opacity:1,display:'block'} );
                });
                $('.banner').mouseenter(function() {
                        TweenLite.killDelayedCallsTo(nextSlide);
                });
                $('.banner').mouseleave(function() {
                        TweenLite.delayedCall(stayTime, nextSlide);
                });

                    for(i = -1; i < numberOfSlides; i++) {
                        (function() {
                            var slideIndex = i;
                            var slideLabel = i + 1;
                            var x = $('<a id="slide' + slideLabel + '"href="#" class="paginatorLink">' + '<i class="material-icons">brightness_1</i>' + '</a>');
                            x.click(function() {



                        TweenLite.killDelayedCallsTo(nextSlide);
                        TweenLite.to( $slides.eq(currentSlide), slideTime, {opacity:0,display:'none'} );
                        currentSlide = slideLabel;      
                        TweenLite.to( $slides.eq(currentSlide), slideTime, {opacity:1,display:'block'} );


                            });
                            $('.pagination').append(x);
                        })();
                    }               

            });

添加导航箭头和分页GSAP幻灯片

1 个答案: