0

Mootools を Javascript フレームワークとして使用して Web サイトを開発しています。

ページ上部の横型ニュース ティッカーで最近のニュースを循環させる必要があります。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>

スクリプトは、スライドとマウスオーバーでの停止の両方でうまく機能しますが、手動で前後に移動するボタンを追加するのに苦労しています

なにか提案を？

4

1 に答える 1

0

わかりました、まさに私が必要としているものを作っている素晴らしい Mootools ギャラリーを見つけました: https://github.com/ginger/slideGallery

于 2013-03-27T12:53:17.023 に答える