Question

我重新创建了他在博客上提到的Jon Raasch的jquery幻灯片

http://jonraasch.com/blog/a-simple-jquery-slideshow

这就像普通项目设置中的魅力一样，但是如果我试图在joomla模板中暗示它，我似乎无法解决setInterval函数中的DOM元素。它将活动变量返回为null。

html部分：

<body>
        <div id="slideShow">
                    <img src="<?php echo $this->baseurl; ?>/templates/mushi/images/img1.jpg" alt="" title="" class="active" />
                    <img src="<?php echo $this->baseurl; ?>/templates/mushi/images/img2.jpg" alt="" title="" />
                    <img src="<?php echo $this->baseurl; ?>/templates/mushi/images/img3.jpg" alt="" title="" />
        </div>
</body>

javascript部分：

function slideSwitch() {

    var $active = $('#slideShow .active');
        console.log($('#slideShow img:last'));

        if ( $active.length == 0 ) $active = $('#slideShow img:last');

        var $next =  $active.next().length ? $active.next()
            : $('#slideShow img:first');
            console.log("here");
        $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);
});

任何帮助都会有很大的帮助

Answer 1

好的，我解决了这个问题，与jquery发生了冲突。我用“jQuery”替换了'$'，它现在运行正常。

jQuery(function() {
    setInterval(function(){
        var $active = jQuery('#slideShow img.active');

        if ( $active.length == 0 ) $active = jQuery('#slideShow img:last');

        var $next =  $active.next().length ? $active.next()
            : jQuery('#slideShow img:first');
            console.log("here");
        $active.addClass('last-active');

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

Jquery幻灯片在Joomla3模板中不起作用

1 个答案: