0

我正在寻找一个 Mootools 幻灯片，它使用计时器（普通幻灯片功能）更改主图片并具有可点击的缩略图列表。因为我正在工作的站点中有许多其他 mootools 功能，所以幻灯片必须是 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();
}

Jakob Holmelund 改编的 Mootools：

if(this.options.bullets){
        this.bullets = new Element("ul").addClass("spin-bullets").inject(this.spinWrap);
        this.slides.each(function(slide, index){
            new Element("li",{text:index+1}).addEvent("click", function(){
                self._stopClock();
                self._spin(index);
            }).inject(self.bullets);
        });
        this._setActiveBullet();
    }

任何建议如何解决这个问题？或任何其他幻灯片的想法？

4

2 回答 2

1

这是我在 Jakobs 文件中添加的.js新代码。也许对于该幻灯片的下一个版本有好处。

在 JS 文件中：（
这增加了查看 aimg是否在幻灯片中并将缩略图添加到<li>CSS 背景图像的能力）

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

然后在 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;
}
于 2013-06-12T21:44:05.407 回答
0

与其重新发明轮子，不如使用已经存在的东西更容易。我快速浏览了 MooTools forge ( http://mootools.net/forge/browse?search=gallery )，发现以下内容：

http://software.bmo-design.de/scrollgallery.html

不久前，我在这个项目上修改了非常棒的http://www.electricprism.com/aeron/slideshow/：http://treecareenterprises.com/c/tree-care-photo-gallery/?showonly=5

不幸的是，我今天没有时间提取代码，但请随意看看，看看您是否可以抓住相关的花絮。此外，它看起来像是在 v1.2.4 上运行，您可能希望将其升级到 1.4，这并不像看起来那么难，请参阅以下链接以获取指导：https ://github.com/mootools/mootools-core/wiki /从 1.2 升级到 1.3 或 1.4

于 2013-06-12T16:04:41.920 回答