MooTools список изображений

Question

У меня есть этот HTML:

<div id='cont'>
    <img src='1.jpg' />
    <img src='2.jpg' />
    <img src='2.jpg' />
</div>

<a href='#'>Prev</a>
<a href='#'>Next</a>

с этим CSS:

#cont{
    position: relative;
    float: left;
    height: 90px;
    width: 120px;
}

#cont img {
    display:block;
    position:absolute;
    top:0;
    left:0;
    z-index: 1;
}

нажатие Далее и Пред. Мне нужно показать изображения Какой самый простой способ сделать это с MooTools?

Answer 1

как ни странно, я только что написал учебник о том, как сделать это в mootools, в моем блоге вчера.

http://fragged.org/tutorial-write-a-small-content-slider-class-in-mootools-and-extend-it_1321.html

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

вот два класса (базовый и расширенный для различного эффекта):

this.contentSwapper = new Class({

    Implements: [Options, Events],

    options: {
        delay: 3000,
        selector: "div",
        controlLeft: "http://fragged.org/img/home/moveLeft.png",
        controlRight: "http://fragged.org/img/home/moveRight.png"
    },

    initialize: function(element, options) {
        this.element = document.id(element);
        if (!this.element)
            return;

        this.setOptions(options);

        this.elements = this.element.getChildren(this.options.selector);
        this.index = 0;
        this.attachControls();
        this.startRotation();
        this.attachEvents();
        this.fireEvent("ready");
    },

    attachControls: function() {
        this.controls = $$([
            new Element("img#moveLeft.contentControl[title=Previous][src={controlLeft}]".substitute(this.options)).inject(this.element, "top"),
            new Element("img#moveRight.contentControl[title=Next][src={controlRight}]".substitute(this.options)).inject(this.element, "top")
        ]);
    },


    attachEvents: function() {
        this.element.addEvents({
            mouseenter: this.stopRotation.bind(this),
            mouseleave: this.startRotation.bind(this),
            "click:relay(img.contentControl)": this.move.bind(this)
        });
    },

    move: function(e, el) {
        this[el.get("id")]();
    },

    moveLeft: function() {
        var next = (this.index == 0) ? this.elements.length-1 : this.index-1;
        this.swapFrames(next);
        this.fireEvent("left");
    },

    moveRight: function() {
        var next = (this.index < this.elements.length-1) ? this.index+1 : 0;
        this.swapFrames(next);
        this.fireEvent("right");
    },

    swapFrames: function(next) {
        // internal to do the swaps
        var curEl = this.elements[this.index];
        curEl.get("tween").removeEvents();
        curEl.set({
            "tween": {
                link: "cancel",
                onComplete: function() {
                    this.element.addClass("hide");
                }
            },
            styles: {
                opacity: 1
            }
        }).fade(0);

        this.index = next;

        var newEl = this.elements[this.index];
        newEl.get("tween").removeEvents();
        newEl.setStyle("opacity", 0).removeClass("hide").fade(1);
    }.protect(),

    stopRotation: function() {
        clearInterval(this.timer);
        this.controls.fade(1);
        this.fireEvent("stop");
    },

    startRotation: function() {
        clearInterval(this.timer);
        this.controls.fade(.5);
        this.timer = this.moveRight.periodical(this.options.delay, this);
        this.fireEvent("start");
    }
});


contentSwapper.Fancy = new Class({

    Extends: contentSwapper,

    initialize: function(element, options) {
        this.parent(element, options);
    },

    swapFrames: function(next) {
        var curEl = this.elements[this.index];
        curEl.get("morph").removeEvents();
        curEl.set({
            styles: {
                zIndex: 1000,
                opacity: 1
            },
            "morph": {
                link: "cancel",
                duration: 1000,
                onComplete: function() {
                    this.element.addClass("hide");
                }
            }
        }).morph({
            opacity: 0
        });

        this.index = next;

        var newEl = this.elements[this.index];
        newEl.get("morph").removeEvents();
        newEl.removeClass("hide").setStyles({
            zIndex: 1001,
            marginTop: -280,
            opacity: 0
        }).morph({
            marginTop: 0,
            opacity: 1
        });
    }

});

new contentSwapper.Fancy(document.id("rotator"));

html:

<section class="rotator" id="rotator">
    <div class="pane" style="background-image:url(http://fragged.org/img/home/hunting-home.jpg)">
        <div class="info">
            <h2>Hunting CS style</h2>
            Built for your `camping` pleasure. nOOb
        </div>
    </div>
    <div class="pane hide" style="background-image:url(http://fragged.org/img/home/fishing-home.jpg)">
        <div class="info">
            <h2>Fishing? Really? </h2>
            Fishing is for mongs. <a href="#">Clcik here</a>
        </div>
    </div>
    <div class="pane hide" style="background-image:url(http://fragged.org/img/home/tourism-home.jpg)">
       <div class="info rambling">
           <h2>Rambling and walking</h2>
           Wish you were here? Can't blame you, it's lame.
        </div>
    </div>
</section>

и т. Д. И т. Д.