Сделать JQuery автопрокрутки

Question

Сделать JQuery автопрокрутки

0

Я установил следующий HTML:

    <div id="minifrontpage-444" class="minifrontpage-tabbed-fade-in-out">
    <div class="minifrontpageid" style="table-layout: fixed; width: 100%; padding: 0px ! important; margin: 0px ! important; height: 154px;">
        <div class="anim">
        <div style="position:relative;" class="anim-div">
                                <div style="padding: 0px ! important; margin: 0px ! important; display: table; width: 100%; position: absolute;" class="animate activex">
                    <div style="display:table-row;width:100%" class="mfp-table-row">
                            <div style="display:table-cell;width:100%;word-wrap:break-word !important" class="mfp-table-cell">
                    <div class="mfp-table-cell-inner">
                    <h2><a href="/devfwdp.co.uk/index.php?option=com_content&amp;view=article&amp;id=42:lorem-ipsum&amp;catid=13:news&amp;Itemid=101">Lorem ipsum</a></h2><br><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et fermentum massa.
    </p><div class="clrfix"></div>              </div>
                </div>
                        </div>

            </div>                          <div style="padding: 0px ! important; margin: 0px ! important; display: none; width: 100%; position: absolute;" class="animate">
                    <div style="display:table-row;width:100%" class="mfp-table-row">
                            <div style="display:table-cell;width:100%;word-wrap:break-word !important" class="mfp-table-cell">
                    <div class="mfp-table-cell-inner">
                    <h2><a href="/devfwdp.co.uk/index.php?option=com_content&amp;view=article&amp;id=43:lorem-ipsum-2&amp;catid=13:news&amp;Itemid=101">Lorem ipsum (2)</a></h2><br><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et fermentum massa.
    </p><div class="clrfix"></div>              </div>
                </div>
                        </div>

            </div>          </div>
        </div>
    </div>
    <div id="mfptabs"><ul><li class="activex"><span>1</span></li><li><span>2</span></li></ul><div class="clr">&nbsp;</div></div>
    </div>

Это скроллер новостей с кнопками "Далее" и "Предыдущая". Я хочу, чтобы скроллер новостей автоматически вращался, где в настоящее время он только вручную при нажатии кнопок.

У меня есть следующий jQuery, который отлично работает:

    jQuery(document).ready(function(){
        jQuery('.minifrontpage-tabbed-fade-in-out').each(function(){
            var theId = jQuery(this).attr('id');

            var mfpElement = jQuery('#'+theId+' .animate');
            var mfpElementLength = mfpElement.length;

            if(mfpElementLength>1){
                var addto = '<ul>';
                for(var i=0;i<mfpElementLength;i++){
                    addto += '<li><span>'+ (i+1) + '</span></li>';
                }
                addto += '</ul>';
                addto += '<div class="clr">&nbsp;</div>';
                jQuery(addto).appendTo('#'+theId+' #mfptabs');
            }

            mfpElement.hide();
            jQuery('#'+theId+' .animate:first').show();
            jQuery('#'+theId+' .animate:first').addClass('activex');
            jQuery('#'+theId+' #mfptabs li:first').addClass('activex');
            mfpElement.css('position','absolute');
            //mfpElement.css('width',mpfAnimateDiv+'%');
            jQuery('#'+theId+' .minifrontpageid').css('height', jQuery('.animate:first').css('height'));

            jQuery('#'+theId+' #mfptabs li').live('click', function(){ 
                var current = jQuery('#'+theId+' #mfptabs li.activex').index();
                var index = jQuery(this).index();
                if( current != index ){
                    jQuery('#'+theId+' #mfptabs li.activex').removeClass('activex');
                    jQuery(this).addClass('activex'); 

                    jQuery('#'+theId+' .minifrontpageid').animate({
                        height: jQuery(mfpElement[index]).css('height')
                    },
                    {
                        step: function(now, fx) {
                            jQuery(mfpElement[current]).fadeOut();
                            jQuery(mfpElement[index]).fadeIn();
                        }
                    });
                }
                return false;
            });
        });
        });

Я пытаюсь сделать это autoscroll, поэтому я попытался использовать следующий код, но он не работает:

    function tick(){
        $('.animate:first').slideUp( function () { $(this).appendTo($('.animate')).slideDown(); });
    }
    setInterval(function(){ tick () }, 500);

Как настроить автоматическую прокрутку страницы при загрузке страницы?

RustyIngles 02 апр. 2014, в 08:45

Источник

Теги:

javascript

jquery

2 ответа

Ещё вопросы

Valdilei Branco · Answer 1 · 2014-05-28T10-58-00.000Z

Решите этот пример. В моей работе я использую только 3 слайда. Я создал одну функцию, чтобы помочь и вызвать триггер:

jQuery(document).ready(function(){
jQuery('.minifrontpage-tabbed-fade-in-out').each(function(){
    var theId = jQuery(this).attr('id');

    var mfpElement = jQuery('#'+theId+' .animate');
    var mfpElementLength = mfpElement.length;

    if(mfpElementLength>1){
        var addto = '<ul>';
        for(var i=0;i<mfpElementLength;i++){
            addto += '<li><span>'+ (i+1) + '</span></li>';
        }
        addto += '</ul>';
        addto += '<div class="clr">&nbsp;</div>';
        jQuery(addto).appendTo('#'+theId+' #mfptabs');
    }

    mfpElement.hide();
    jQuery('#'+theId+' .animate:first').show();
    jQuery('#'+theId+' .animate:first').addClass('activex');
    jQuery('#'+theId+' #mfptabs li:first').addClass('activex');
    mfpElement.css('position','absolute');
    //mfpElement.css('width',mpfAnimateDiv+'%');
    jQuery('#'+theId+' .minifrontpageid').css('height', jQuery('.animate:first').css('height'));

    jQuery('#'+theId+' #mfptabs li').live('click', function(){ 
        var current = jQuery('#'+theId+' #mfptabs li.activex').index();

        var index = jQuery(this).index();
        if( current != index ){
            jQuery('#'+theId+' #mfptabs li.activex').removeClass('activex');
            jQuery(this).addClass('activex'); 


            jQuery('#'+theId+' .minifrontpageid').animate({
                height: jQuery(mfpElement[index]).css('height')
            },
            {
                step: function(now, fx) {
                    jQuery(mfpElement[current]).fadeOut();
                    jQuery(mfpElement[index]).fadeIn();
                }
            });
        }
        return false;
    });
});


function teste(par) {

    var current = (par - 1);
    var prox = (par + 1);

    if (current < 0) {
        current = 2;
    }

    if (prox > 2){
        prox = 0;
    }

    var mfpElement = jQuery('#minifrontpage-99 .animate');
    var mfpElementLength = mfpElement.length;

    var liativo = jQuery('#mfptabs li');

    jQuery('#mfptabs li.activex').removeClass('activex');
    jQuery(liativo[par]).addClass('activex'); 

    jQuery('.minifrontpageid').animate({
        height: jQuery(mfpElement[par]).css('height')
    },
    {
        step: function(now, fx) {
            jQuery(mfpElement[current]).fadeOut();
            jQuery(mfpElement[par]).fadeIn();
        }
    });


    setTimeout(function () {teste(prox)}, 3000);
}

setTimeout(function () {teste(1)}, 3000);

});

bhb · Answer 2 · 2014-04-02T05-52-00.000Z

Если вы хотите прокрутить страницу до определенной точки, используйте это (при условии, что у вас есть ссылка с id scrollToThis)

    $('html, body').animate({
        scrollTop: $("#scrollToThis").offset().top
    }, 2000);

Привет, это делало автоматическую прокрутку карусели к следующему пункту, что делает jQuery, но с кнопками
пожалуйста, объясните подробно, чего вы пытаетесь достичь?
Я только что обновил код выше. Спасибо :)