Javascript Mootools幻灯片放映

我正在寻找一个Mootools的幻灯片，它可以通过定时器（正常的幻灯片功能）改变主画面，并且有一个可点击的缩略图列表。因为我在网站上有很多其他的mootools功能，所以幻灯片必须是mootools

我找到了两个选择：

• （这是一个v.2的）-如何让它开始幻灯片放映？（在第一张图片中停止）

• （Jakob改编自jQuery幻灯片）-该.js文件缺少thumbs代码。有没有关于如何将jQuery思想合并/转换为Mootools的想法？
  （请参见下）

jQuery版本：

if (options.bulletThumbs) {
var thumbName = slides.eq(i).data('thumb');
if (thumbName) {
    var liMarkup = $('<li class="has-thumb">' + i + '</li>')
    liMarkup.css({
        "background": "url(" + options.bulletThumbLocation + thumbName + ") no-repeat"
    });
}
}

orbitWrapper.children('ul.orbit-bullets').append(liMarkup);
liMarkup.data('index', i);
liMarkup.click(function () {
stopClock();
shift($(this).data('index'));
});
}
setActiveBullet();
}

---

有没有关于如何解决其中一个问题的建议？或者任何其他幻灯片放映的想法？

与其重新发明轮子，不如使用已经存在的东西。我快速查看了MooTools forge（）并发现以下内容：

不久前，我在这个项目上修改了非常棒的：

---

不幸的是，我今天没有时间提取代码，但请随意看一看，看看您是否能抓住相关的花絮。此外，它看起来是在v1.2.4上运行的。您可能希望将其升级到1.4，这并不像看上去那么难。请参见以下指南链接：

这是我在文件的

.js

中添加的新代码。也许适合下一个版本的幻灯片

在JS文件中：
（这增加了查看幻灯片中是否有

img

的功能，并将缩略图添加到

CSS背景图像中）

然后添加CSS：

.spin-bullets li.spin-bullets-img { 
width: 50px;
height: 25px;
background-position: center top;
background-size: 80px auto;
border:#CCC 4px solid;
}
.spin-bullets li.spin-bullets-img.active {
border:#88F 4px solid;
}

---

谢谢你检查我的问题，蒂姆。你的建议和我的第一个选择一样。该库不会更改第一个图像。它是静态的。没有幻灯片功能。你知道如何“启动”它吗？嗯，对不起，我没注意到它是一样的。请参阅编辑后的答案。没问题。蒂姆，那个画廊不会改变第一张图片。它是静态的。没有幻灯片功能。您知道如何“启动”它吗？是的，您基本上会使用setTimeout并在下一个缩略图上触发click事件。如果循环计数器为>数组长度，则返回第一个缩略图。或者参见编辑。顺便说一下，如果您还需要。直播版，持续几天。

if(this.options.bullets){
        this.bullets = new Element("ul").addClass("spin-bullets").inject(this.spinWrap);
        this.slides.each(function(slide, index){
            var stl = '';
            if (!slide.hasChildNodes()) stl = 'background-image: url('+slide.getAttribute('src')+')';
            else if (slide.getChildren('img').length > 0) stl = 'background-image: url('+slide.getChildren('img')[0].get('src')+')'; 
            else if (slide.get('img')) stl = 'background-image: url('+slide.get('img').get('src')+')'; 

            new Element("li",{text:index+1, style: stl, class: ((stl != '')?"spin-bullets-img":"")}).addEvent("click", function(){
                self._stopClock();
                self._spin(index);
            }).inject(self.bullets);
        });
        this._setActiveBullet();
    }

.spin-bullets li.spin-bullets-img { 
width: 50px;
height: 25px;
background-position: center top;
background-size: 80px auto;
border:#CCC 4px solid;
}
.spin-bullets li.spin-bullets-img.active {
border:#88F 4px solid;
}