如何定义全局变量来制作切换按钮?

时间:2014-11-07 17:32:50

标签: javascript html

这是我做的javascript代码:

var buttonPause = 'Pause Slide';
(function (d, w) {

    // user defines

    var
            swapHours = 0,
            swapMinutes = 0,
            swapSeconds = 5,
            swapTotal = (swapHours * 60 + swapMinutes) * 60 + swapSeconds,
            loopSlideShow = true,
            isPaused = true;

    // some handy helper functions

    function classExists(e, className) {
        return RegExp('(\\s|^)' + className + '(\\s|$)').test(e.className);
    }

    function classAdd(e, className) {
        if (classExists(e, className))
            return false;
        e.className += (e.className ? ' ' : '') + className;
        return true;
    }

    function classRemove(e, className) {
        if (!classExists(e, className))
            return false;
        e.className = e.className.replace(
                new RegExp('(\\s|^)' + className + '(\\s|$)'), ' '
                ).replace(/^\s+|\s+$/g, '');
        return true;
    }

    function nodeFirst(e) {
        e = e.firstChild;
        while (e && e.nodeType != 1)
            e = e.nextSibling;
        return e;
    }

    function nodeLast(e) {
        e = e.lastChild;
        while (e && e.nodeType != 1)
            e = e.previousSibling;
        return e;
    }

    function nodeNext(e) {
        while (e = e.nextSibling)
            if (e.nodeType == 1)
                return e;
        return null;
    }

    function nodePrev(e) {
        while (e = e.previousSibling)
            if (e.nodeType == 1)
                return e;
        return null;
    }

    function nodeFlush(e) {
        while (e.firstChild)
            e.removeChild(e.firstChild);
    }

    function nodeReplace(e, newNode) {
        nodeFlush(e);
        e.appendChild(
                typeof newNode == 'object' ? newNode : d.createTextNode(newNode)
                );
    }

    function make(tagName, child, attribs, parent) {
        var e = d.createElement(tagName);
        if (child)
            e.appendChild(
                    typeof child == 'object' ? child : d.createTextNode(child)
                    );
        if (attribs)
            for (var i in attribs)
                e[i] = attribs[i];
        if (parent)
            parent.appendChild(e);
        return e;
    }

    function prevent(e, deselect) {
        e.cancelBubble = true;
        if (e.stopPropagation)
            e.stopPropagation();
        if (e.preventDefault)
            e.preventDefault();
        e.returnValue = false;
        if (deselect) {
            if (w.getSelection)
                w.getSelection().removeAllRanges();
            if (d.selection)
                d.selection.empty();
        }
    }

    function controlEvent(e, handler) {
        handler();
        e = e || window.event;
        prevent(e, true);
    }

    function clockFormat(value) {
        value = String(Math.floor(value));
        while (value.length < 2)
            value = '0' + value;
        return value;
    }

    // slideShow functions

    function showCounter() {
        nodeReplace(slideCounter,
                clockFormat(swapCounter / 3600) + ':' +
                clockFormat((swapCounter / 60) % 60) + ':' +
                clockFormat(swapCounter % 60)
                );
    }

    function resetCounter() {
        swapCounter = swapTotal;
        showCounter();
    }

    function makeSlide(newSlide) {
        classRemove(currentSlide, 'ss_show');
        currentSlide = newSlide;
        classAdd(currentSlide, 'ss_show');
    }

    function nextSlide() {
        resetCounter();
        var newSlide = nodeNext(currentSlide);
        if (newSlide)
            makeSlide(newSlide);
        else if (loopSlideShow)
            makeSlide(firstSlide);
    }

    function prevSlide() {
        resetCounter();
        var newSlide = nodePrev(currentSlide);
        if (newSlide)
            makeSlide(newSlide);
        else if (loopSlideShow)
            makeSlide(lastSlide);
    }

    function slideUpdate() {
        if (swapCounter--)
            showCounter();
        else
            nextSlide();
    }

    function pauseSlide() {
        change();
    }

    function change() // no ';' here
    {
        buttonPause = 'Continue Slide';
    }


    function startSlideShow() {
        resetCounter();
        setInterval(slideUpdate, 1000);
    }

    // slideShow setup

    var
            slideShow = d.getElementById('slideShow'),
            slideCounter = make('div', false, {id: 'slideCounter'}),
            slideControls = make('div', false, {id: 'slideControls'}),
            slidePrev = make('a', 'Previous Slide', {
                onclick: function (e) {
                    controlEvent(e, prevSlide);
                },
                className: 'previous',
                href: '#'
            }, slideControls),
            slideNext = make('a', 'Next Slide', {
                onclick: function (e) {
                    controlEvent(e, nextSlide);
                },
                className: 'next',
                href: '#'
            }, slideControls),
            slidePause = make('a', buttonPause, {
                onclick: function (e) {
                    controlEvent(e, pauseSlide);
                },
                className: 'pause',
                href: '#'
            }, slideControls),
            firstSlide = nodeFirst(slideShow),
            lastSlide = nodeLast(slideShow),
            currentSlide = firstSlide,
            swapCounter;
    slideShow.parentNode.insertBefore(slideCounter, slideShow);
    slideShow.parentNode.insertBefore(slideControls, slideShow.nextSibling);

    classAdd(slideShow, 'ss_scripted');
    classAdd(currentSlide, 'ss_show');

    // wait for onload to actually start the countdown

    if (w.addEventListener)
        w.addEventListener('load', startSlideShow, false);
    else
        w.attachEvent('onload', startSlideShow);


})(document, window);

Slide Show

我想要做的是在javascript代码中我添加了一个新按钮。

暂停幻灯片。

我还尝试在main函数中添加一个全局变量,因为如果变量是inisde函数,我声明所有变量变量具有相同的值始终相同的文本&#39; Pause Slide&#39;

但是当我从主函数声明变量时,它变成紫色,就像变量不存在一样。

然后在javascript代码中添加了两个新函数:pauseSlide()和change()

我在// slideShow设置中使用变量buttonPause slidePause = make ...

我想做的是:

单击“暂停幻灯片”按钮时,它会将按钮文本更改为“继续滑动”,并且还会暂停计时器。 当我再次点击它时,它会将文本更改回Pause Slide并继续计时器。

如何切换按钮才能工作?

0 个答案:

没有答案