Question

我在网上搜索了3天，找到解决我这个简单问题的方法。我尝试在此脚本的外部pause代码中运行<a>函数：http://www.twospy.com/galleriffic/js/jquery.galleriffic.js

pause: function() {
            this.isSlideshowRunning = false;
            if (this.slideshowTimeout) {
                clearTimeout(this.slideshowTimeout);
                this.slideshowTimeout = undefined;
            }

我尝试过这样的事情：<a href="javascript:fn.galleriffic.extend.pause()">pause</a>

编辑：整个脚本：

<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="css/galleriffic-2.css" type="text/css" />
    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.galleriffic.js"></script>
    <script type="text/javascript" src="js/jquery.opacityrollover.js"></script>
    <!-- We only want the thunbnails to display when javascript is disabled -->
    <script type="text/javascript">
        document.write('<style>.noscript { display: none; }</style>');
    </script>
</head>
<body>
            <!-- Start Advanced Gallery Html Containers -->
            <div id="gallery" class="content">
                <div id="controls" class="controls"></div>
                <div class="slideshow-container">
                    <div id="loading" class="loader"></div>
                    <div id="slideshow" class="slideshow"></div>
                </div>
                <a id="sstop" href="#">pause</a> <!--here the link-->
                <div id="caption" class="caption-container"></div>
            </div>
            <div id="thumbs" class="navigation">
                <ul class="thumbs noscript">
                    <li>
                ...
                </ul>
            </div>
            <div style="clear: both;"></div>

    <script type="text/javascript">
    var galleryswtch=0;
        jQuery(document).ready(function($) {
            // We only want these styles applied when javascript is enabled
            $('div.navigation').css({'width' : '300px', 'float' : 'left'});
            //$('div.content').css('display', 'none');

            // Initially set opacity on thumbs and add
            // additional styling for hover effect on thumbs
            var onMouseOutOpacity = 0.67;
            $('#thumbs ul.thumbs li').opacityrollover({
                mouseOutOpacity:   onMouseOutOpacity,
                mouseOverOpacity:  1.0,
                fadeSpeed:         'fast',
                exemptionSelector: '.selected'
            });

            // Initialize Advanced Galleriffic Gallery
            var gallery = $('#thumbs').galleriffic({
                delay:                     2500,
                numThumbs:                 3,
                preloadAhead:              10,
                enableBottomPager:         true,
                maxPagesToShow:            11,
                imageContainerSel:         '#slideshow',
                controlsContainerSel:      '#controls',
                captionContainerSel:       '#caption',
                loadingContainerSel:       '#loading',
                renderSSControls:          true,
                renderNavControls:         true,
                playLinkText:              'Play Slideshow',
                pauseLinkText:             'Pause Slideshow',
                prevLinkText:              '&lsaquo; Previous Photo',
                nextLinkText:              'Next Photo &rsaquo;',
                nextPageLinkText:          'Next &rsaquo;',
                prevPageLinkText:          '&lsaquo; Prev',
                enableHistory:             false,
                autoStart:                 false,
                syncTransitions:           true,
                defaultTransitionDuration: 900,
                onSlideChange:             function(prevIndex, nextIndex) {
                    // 'this' refers to the gallery, which is an extension of $('#thumbs')
                    this.find('ul.thumbs').children()
                        .eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
                        .eq(nextIndex).fadeTo('fast', 1.0);
                },
                onPageTransitionOut:       function(callback) {
                    this.animate({opacity: '0'}, 500, 'linear', callback);

                },
                onPageTransitionIn:        function() {
                    this.animate({opacity: '1'}, 500, 'linear');
                }
            });

            $('#sstop').click(function() {$('#gallery').galleriffic('pause');}); //here the js
        });
    </script>
</body>

Answer 1

由于Galleriffic是一个作用于DOM元素的jQuery扩展，它应该是：

$(myselector).galleriffic("pause");

其中myselector是对图库附加的任何元素的引用[例如'#thumbs'如果您使用与Galleriffic示例中相同的元素ID。]

理想情况下，在您的JS文件中建立此关联，而不是通过首先提供您的链接和ID在HTML中内联：

<a href="#" id="pause_link"> Pause </a>

然后：

$(document).ready(function() {
    // do all of the rest of your galleriffic setup
    $('#thumbs').galleriffic(
        // initial options
    );

    // and then link the pause link with the gallery
    $('#pause_link').click(function() {
        $('#thumbs').galleriffic('pause');
    });
});

[基本原理 - 在现代HTML中，将您的Javascript内联视为“olde worlde”]

Answer 2

要调用不带参数的函数（例如此函数），您应该像pause()一样调用它。

Answer 3

试试这个

yourobjectname.pause();

Answer 4

任何理由

$('#myElement').delay(2000)

不会工作？还是暂停未定义的时间？

如果是这样，只需创建一个新函数并在a.click事件中调用它：）

如何运行jQuery插件上定义的函数？

4 个答案: