0

我正在开发一个使用 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});

看起来像

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

该脚本在鼠标悬停时滑动和停止都很好，但是我在添加按钮以手动向前和向后移动时遇到了困难

有什么建议吗？

4

1 回答 1

0

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

于 2013-03-27T12:53:17.023 回答