1

我想在 wordpress 中制作幻灯片，但由于某种原因它不起作用：

我的 .js 文件：

(function ($) {
    function slideSwitch() {
        var $active = $('#gallery1 IMG.active');

        if ( $active.length == 0 ) $active = $('#gallery1 IMG:last');

        var $next =  $active.next().length ? $active.next()
                : $('#gallery1 IMG:first');

        $active.addClass('last-active');

        $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
    }

    $(function() {
        setInterval( "slideSwitch()", 5000 );
    });

});

CSS 样式：

#gallery1{
    position: relative;
    width:400px;
    height:300px;
}
#gallery1 img{
    position:absolute;
    z-index:8;
}
#gallery1 img.active{
    z-index:10;
}
#gallery1 img.last-active{
    z-index:9;
}

html代码：

 <div id="gallery1">
 <img src="img1.jpg" class="active"/>
 <img src="img2.jpg"/>
 <img src="img3.jpg"/>
  </div>

Chromes 开发者工具不会显示任何错误。虽然萤火虫，显示此错误：错误断点：

但我不明白第一张图片有什么问题，它加载得很好。有没有人看到问题？

4

5 回答 5

1

@nez 是正确的，因为您声明匿名函数的方式，当 DOM 准备好时，您的函数将不会被执行。它应该如下所示：

(function ($) { 
    function slideSwitch() {
        var $active = $('#gallery1 IMG.active');

        if ( $active.length == 0 ) $active = $('#gallery1 IMG:last');

        var $next =  $active.next().length ? $active.next()
                : $('#gallery1 IMG:first');

        $active.addClass('last-active');

        $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
    }

    $(function() {
        setInterval( "slideSwitch()", 5000 );
    });
}(jQuery));

此声明有助于确保您的插件不会与可能使用美元符号的其他库发生冲突，最好将 jQuery 传递给将其映射到美元符号的 IIFE（立即调用函数表达式），以便它可以' 不会在其执行范围内被另一个库覆盖。直接来自他们的文档：

http://docs.jquery.com/Plugins/Authoring

于 2012-08-02T12:24:58.317 回答
1

你这样做是不对的。

您需要一个没有冲突的 JQuery 版本，它将通过别名将其与原型一起运行，如以下链接所示： http: //digwp.com/2009/06/including-jquery-in-wordpress-the-right-way/

然后制作你的代码：

var $j = jQuery.noConflict();

function slideSwitch() {
    var $active = $j('#gallery1 IMG.active');

    if ( $active.length == 0 ) $active = $j('#gallery1 IMG:last');

    var $next =  $active.next().length ? $active.next()
            : $j('#gallery1 IMG:first');

    $active.addClass('last-active');

    $next.css({opacity: 0.0})
    .addClass('active')
    .animate({opacity: 1.0}, 1000, function() {
        $active.removeClass('active last-active');
    });
}

$j(function() {
    setInterval( "slideSwitch()", 5000 );
});
于 2012-08-02T12:31:44.553 回答
0

我无法弄清楚您的代码可能出了什么问题，但是，这是创建使用SlidesJS jquery 插件的幻灯片的替代方法。

$("#slides").slides({
    preload: true,        
    play: 2000,
    pause: 2500        
});

在此处查看实际操作 （上面的代码在 Javascript 编辑器的底部）

于 2012-08-02T12:06:52.037 回答
0

首先-您从未执行过第一个功能（这就是为什么您看到图像而没有任何反应的原因）。

尝试：

$(function() {

  var slideSwitch = function () {
    var $active = $('#gallery1 IMG.active'),
      $next;

    if ($active.length == 0) {
      $active = $('#gallery1 IMG:last');
    }

    $next = $active.next().length ? $active.next() : $('#gallery1 IMG:first');

    $active.addClass('last-active');

    $next.css({opacity: 0.0})
      .addClass('active')
      .animate({opacity: 1.0}, 1000, function() {
        $active.removeClass('active last-active');
      });
  }

  setInterval(slideSwitch, 5000);
});
于 2012-08-02T12:12:40.340 回答
0

好的，提供的答案解决了我的问题（不知道为什么那个人删除了他的答案）：这个有效：

var $j = jQuery.noConflict();

function slideSwitch() {
var $active = $j('#gallery1 IMG.active');

if ( $active.length == 0 ) $active = $j('#gallery1 IMG:last');

var $next =  $active.next().length ? $active.next()
        : $j('#gallery1 IMG:first');

$active.addClass('last-active');

$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
    $active.removeClass('active last-active');
});

}

$j(function() {
setInterval( "slideSwitch()", 5000 );
});
于 2012-08-02T12:43:52.483 回答