0

我是这个论坛的新手，我为我的客户建立的网站有一个棘手的问题。我的 MooTools 幻灯片出现问题。我有一个带有 4 个 Spry 选项卡的页面，其中 3 个有幻灯片。我已经为多个幻灯片设置了页面，但只有第一个选项卡可以正常工作。这是我遇到的两个问题：

  1. 缩略图适用于第一个选项卡，但对于其他选项卡，它们似乎相互堆叠并在鼠标悬停时颤动。

  2. 当您切换到不同的选项卡时，您会在幻灯片屏幕的右上角看到一个较小的照片伪影，持续几秒钟（我感觉当 #1 解决后这会消失）。

我从另一个论坛获得了帮助： 问题可能是幻灯片在隐藏时无法正确计算尺寸。这确实是 javascript/DOM 操作的普遍问题：当元素设置为 display:none - 就像隐藏的选项卡一样 - 它们内部的节点没有高度/宽度。解决方法是在选项卡可见后初始化每个幻灯片。

作为一个 js 实现者而不是编码器，我真的不知道如何完成这个，或者即使它会起作用。我将如何在标签可见性上初始化每个幻灯片？

可以在此处查看该网站：http: //www.interimdesigngroup.com/threesprings/area.shtml

任何帮助，将不胜感激！

谢谢， Nektar 72

4

1 回答 1

0

将所有三个选项卡的幻灯片初始化替换为以下内容：

<script>
    var activeSlideShow = false;
    var activateSlideShow = function(el) {
        if(activeSlideShow) {
            activeSlideShow.destroy();
        }
        switch(el.getProperty('tabindex')){
            case '0':
                activeSlideShow = new Slideshow('balch',
                    {
                        '1.jpg': { caption: '' },
                        '2.jpg': { caption: '' },
                        '3.jpg': { caption: '' }, 
                        '4.jpg': { caption: '' }, 
                        '5.jpg': { caption: '' }, 
                        '6.jpg': { caption: '' }, 
                        '7.jpg': { caption: '' }, 
                        '8.jpg': { caption: '' }, 
                        '9.jpg': { caption: '' }, 
                        '10.jpg': { caption: '' }, 
                        '11.jpg': { caption: '' }
                    }, 
                    {
                        captions: { delay: 1000 },
                        delay: 3000,
                        height: 467,
                        hu: 'images/balch/',
                        width: 350
                    }
                );
            break;
            case '3':
                activeSlideShow = new Slideshow('poi', 
                    {
                        '1.jpg': { caption: 'Blue Ridge' }, 
                        '2.jpg': { caption: 'Blue Ridge' }, 
                        '3.jpg': { caption: 'Blue Ridge' }, 
                        '4.jpg': { caption: 'Blue Ridge' }, 
                        '5.jpg': { caption: 'Blue Ridge' }, 
                        '6.jpg': { caption: 'Blue Ridge' }, 
                        '7.jpg': { caption: 'Grouse Valley' }, 
                        '8.jpg': { caption: 'Grouse Valley' },
                        '9.jpg': { caption: 'Grouse Lake' },
                        '10.jpg': { caption: 'Wildflowers in Yokohl Valley' }, 
                        '11.jpg': { caption: 'Wildflowers in Yokohl Valley' }, 
                        '12.jpg': { caption: 'Wildflowers in Yokohl Valley' }, 
                        '13.jpg': { caption: 'Wildflowers in Yokohl Valley' }, 
                        '14.jpg': { caption: 'Tule River' }, 
                        '15.jpg': { caption: 'Tule River' }, 
                        '16.jpg': { caption: 'Tule River' }, 
                        '17.jpg': { caption: 'Tule River' }, 
                        '18.jpg': { caption: 'Tule River' }, 
                        '19.jpg': { caption: 'Tule River' }, 
                        '20.jpg': { caption: 'Tule River' }, 
                        '21.jpg': { caption: 'Tule River' }, 
                        '22.jpg': { caption: 'Tule River' }, 
                        '23.jpg': { caption: 'Dome Rock' }
                    },
                    {
                        captions: { delay: 1000 },
                        delay: 3000, 
                        height: 300, 
                        hu: 'images/poi/', 
                        width: 400 
                    }
                );
            break;
            case '1':
            default:
                activeSlideShow = new Slideshow('springville',
                    {
                        '1.jpg': { caption: '' }, 
                        '2.jpg': { caption: '' }, 
                        '3.jpg': { caption: '' }, 
                        '4.jpg': { caption: '' }, 
                        '5.jpg': { caption: '' }, 
                        '6.jpg': { caption: '' }, 
                        '7.jpg': { caption: '' }, 
                        '8.jpg': { caption: '' }, 
                        '9.jpg': { caption: '' }, 
                        '10.jpg': { caption: '' }, 
                        '11.jpg': { caption: '' }, 
                        '12.jpg': { caption: '' }, 
                        '13.jpg': { caption: '' }
                    }, 
                    { 
                        captions: { delay: 1000 }, 
                        delay: 3000, 
                        height: 300, 
                        hu: 'images/springville/', 
                        width: 400 
                    }
                );
            break;
        }
    }
    window.addEvent('domready', function(){
        var tabs = $$('#TabbedPanels1 ul li');
        tabs.addEvent('click', function(e){
            activateSlideShow(this);
        });
        activateSlideShow(tabs[0]);
    });
</script>
于 2011-12-20T19:52:37.117 回答