Mootools - Как сделать новостной слайдер (тикер) со стрелками

Я разрабатываю сайт, используя Mootools в качестве фреймворка Javascript.

Мне нужно, чтобы некоторые последние новости циркулировали в горизонтальном тикере новостей в верхней части страницы. Я хочу, чтобы 4 или 5 разных новостей (из общего числа 20) висели одновременно и вращались.

Я нашел следующий чистый скрипт:

/* ImageSlider
* version 0.1 *
* Copyright (c) 2008-2010 ecce media Ltd (www.eccemedia.com) *
     * http://www.eccemedia.com/blog/blog.html&blogid=5 *
     */


    var ImageSlider = new Class({
        Implements: [Options],
        options: {
            sliders: 'slider-list',
            transitionduration:5000,
            autorotate:true,
            transition:Fx.Transitions.linear
        },
        initialize: function(options) {
            this.setOptions(options);
            var c = this;
            var op = this.options;
            if(op.autorotate) this.animate();
            $(op.sliders).addEvent('mouseover',function(){op.SlideFX.pause();});
            $(op.sliders).addEvent('mouseleave',function(){op.SlideFX.resume();});

        },
        animate:function(){
            var c = this;
            var op = this.options;
            var sliders = $$('#'+op.sliders+' li');
            if(sliders.length>0){
                op.SlideFX = new Fx.Tween(sliders[0],{'transition':op.transition,'duration':op.transitionduration,'onComplete':function(){
                    sliders[0].inject($(op.sliders));
                    sliders[0].setStyle('margin-left',0);
                    c.animate();
                }});
                op.SlideFX.start('margin-left', -sliders[0].getSize().x);
            }
        }
    });

var sliderID = new ImageSlider({'sliders':'TickerHorizontal','transitionduration':6000});

HTML выглядит как

<div id="TickerHorizontal">
<ul>
<li>.....</li>
<li>.....</li>
<li>.....</li>
</ul>
</div>

Скрипт хорошо работает как при скольжении, так и при наведении мыши на НО. Я изо всех сил пытаюсь добавить кнопки для перемещения вперед и назад вручную.

Любое предложение?

1 ответ

Хорошо, нашел отличную галерею Mootools, которая делает именно то, что мне нужно, и даже больше: https://github.com/ginger/slideGallery

Другие вопросы по тегам