用mootools开发的轮播图组件

<div class="image-slider">
    <div class="img-previewer">
        <div id="imgsbox" style="position:relative">
            <?php foreach ($pictures as $key =>$value) :?>
            <a href="<?=$hrefs[$key];?>
                ">
                <img src="<?=$pictures[$key];?>" alt="" /></a>
            <?php endforeach;?></div>
    </div>
    <div class="img-gallery">
        <div class="img-desc">
            <h3>
                <a href="javascript:;" id="imgTitle">
                    <?=$titles[0];?></a>
            </h3>
            <p>
                <a href="javascript:;" id="imgDescribe">
                    <?=$describe[0];?></a>
            </p>
        </div>
        <div class="image-listing">
            <ul>
                <?php
                  foreach ($s_pictures as $k=>$v):
                  $sld = $k == 0 ? "selected" : "";
                ?>
                <li class="<?=$sld;?>
                    ">
                    <a href="javascript:;">
                        <img src="<?=$v;?>" alt="" /></a>
                </li>
                <?php endforeach;?></ul>
        </div>
    </div>
</div>
<script type="text/javascript">
 window.addEvent("domready", function() {
     var imgplayer = new Class({
         initialize: function(a) {
             this.autoPlay = a.autoPlay || false;
             this.imgbox = a.imgbox;
             this.imgList = a.imgList;
             this.duration = a.duration || 500;
             this.imgWidth = a.imgWidth;
             this.imgTitle = a.imgTitle;
             this.imgDescribe = a.imgDescribe;
             this.timer = null;
             this.imgbox.setStyle("width", this.imgWidth * 5);
             this.fx = new Fx.Tween(this.imgbox, {
                 duration: this.duration
             });
             this.currentIndex = a.currentIndex || 0;
             this.li = this.imgList.getElements('li');
             for (i = 0; i < this.li.length; i++) {
                 this.li[i].addEvents({
                     'mouseenter': this.addCount.pass([i], this),
                     'mouseleave': this.addCount.pass(['go'], this)
                 });
             }
             if (this.autoPlay == true) {
                 this.autoPlayer();
             }
         },
         addCount: function(i) {
             if ($type(i) == 'number') {
                 $clear(this.timer);
                 this.currentIndex = i;
                 this.fx.cancel().start('left', (this.imgWidth * -this.currentIndex) + "px");
             } else {
                 this.currentIndex = this.currentIndex > 2 ? 0 : this.currentIndex + 1;
                 this.fx.start('left', (this.imgWidth * -this.currentIndex) + "px");
                 if (this.autoPlay == true && i == "go") {
                     this.autoPlayer();
                 }
             }
             this.li.removeClass("selected");
             this.li[this.currentIndex].addClass("selected");
             this.imgTitle['o'].set('text', this.imgTitle['data'][this.currentIndex])
             this.imgDescribe['o'].set('text', this.imgDescribe['data'][this.currentIndex])
         },
         autoPlayer: function() {
             this.timer = this.addCount.periodical(3000, this);
         }

     })

     var ig = new imgplayer({
         imgbox: $("imgsbox"),
         imgTitle: {
             'o': $('imgTitle'),
             "data": <?= json_encode($titles); ?>
         },
         imgDescribe: {
             'o': $('imgDescribe'),
             'data': <?= json_encode($describe); ?>
         },
         imgWidth: 950,
         imgList: $$(".image-listing")[0],
         autoPlay: true
     });
 })
</script>