Question

我正在使用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>

该脚本在滑动和停止鼠标时效果都很好但是我在努力添加按钮以手动前进和后退

有什么建议吗？

Answer 1

好的，找到了一个很棒的Mootools画廊，它正是我所需要的，甚至更多： https://github.com/ginger/slideGallery

Mootools - 如何用箭头制作新闻滑块（自动收报机）

1 个答案: