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;
}

单击 Next 和 Prev 我需要显示图像。使用 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>

等等等，玩得开心