3

我正在jQuery为客户开发一个内容滑块模块。内容滑块应该在不同的内容元素之间滑动。滑块在普通的情况下工作得很好，html/javascript但我在将其转换为 Joomla 模块时遇到了麻烦。

这是代码：

<?php
// no direct access
defined( '_JEXEC' ) or die( 'Restricted access' );
$doc =& JFactory::getDocument();
$doc->addStyleSheet( 'modules/mod_slider40secs/css/jquery-ui-1.8.17.custom.css' );
$doc->addStyleSheet( 'modules/mod_slider40secs/css/style.css' );
$doc->addScript( 'modules/mod_slider40secs/js/jquery-1.7.1.min.js' );
$doc->addScript( 'modules/mod_slider40secs/js/jquery-ui-1.8.17.custom.min.js' );
$doc->addScript( 'modules/mod_slider40secs/js/jquery.cycle.all.js' );
$doc->addScript( 'modules/mod_slider40secs/js/noconflict.js' );
?>

<script type="text/javascript">
var prevValue, totalImages;
prevValue=0;

function moveNext(step){

}


totalImages = (jQuery("#gallery li").length) - 1;
jQuery('#gallery').cycle({ 
    fx:     'none', 
    speed:  'fast', 
    timeout: 2000, 
    next:   '#next', 
    prev:   '#prev',
    skipInitializationCallbacks: true,
    before: function(currSlideElement, nextSlideElement, options, forwardFlag){
        jQuery( ".slider" ).slider({
            value : totalImages * options.nextSlide
        });
    }
});

jQuery( ".slider" ).slider({
    value:0,
    min: 0,
    max: totalImages * totalImages,
    step: totalImages,
    slide: function( event, ui ) {
        if(ui.value > prevValue){
            jQuery("#next").click();

        }
        else if(ui.value<prevValue){
            jQuery("#prev").click();
        }
        prevValue=ui.value;
    }
});

jQuery(".slider a").focusin("click", function(){
    jQuery('#gallery').cycle("pause");
});


</script>

<div class="main">
    <div class="wrapper">
        <div class="sliderGallery">
            <div class="gallery">
                <ul class="clearfix" id="gallery">
                    <?php
                    foreach($articleArray as $arti)
                    {
                        ?>
                        <li>
                            <div>
                                <?php echo($arti['title']); ?>
                                <?php echo($arti['text']); ?>
                            </div>

                        </li>
                        <?php
                    }
                    ?>
                </ul>
                <div class="navigation">
                    <a id="prev" href="javascript:void(0)">Prev</a>
                    <a id="next" href="javascript:void(0)">Next</a>
                </div><!--End of navigation -->
            </div><!--End  of gallery -->
            <div class="slider">
            </div><!--End of slider -->
        </div><!--End of slider gallery -->
    </div><!--End of wrapper -->
</div><!--End of main -->

谁能帮我找出错误？

该脚本以前在一个jQuery(document).ready()函数中被调用，但它也不是这样工作的。

我目前看到的是单篇文章，但没有滑块/等。使用 Firebug 我可以看到正在加载脚本，所以那里没有问题。

4

2 回答 2

1

在执行脚本时，尚未创建 HTML 元素。解决它的一种简单方法是将脚本标签移动到 HTML 元素下方。

以下将不起作用：

<script>
document.getElementById('asd').innerText = 'asd';
</script>
<div id="asd"></div>

但是，如果您将脚本标签移动到底部，它将：

<div id="asd"></div>
<script>
document.getElementById('asd').innerText = 'asd';
</script>
于 2012-11-03T10:34:23.227 回答
0

正如@Fnatte 所说，尚未创建 HTML。

编辑：我错过了你说这是在一个模块中的部分。

解决方案是使用jQuery(window).load(function()

<script language="javascript" type="text/javascript">
// -->
/* <![CDATA[ */

var prevValue, totalImages;
prevValue=0;

jQuery(window).load(function() {

totalImages = (jQuery("#gallery li").length) - 1;
jQuery('#gallery').cycle({ 
    fx:     'none', 
    speed:  'fast', 
    timeout: 2000, 
    next:   '#next', 
    prev:   '#prev',
    skipInitializationCallbacks: true,
    before: function(currSlideElement, nextSlideElement, options, forwardFlag){
        jQuery( ".slider" ).slider({
            value : totalImages * options.nextSlide
        });
    }
});

jQuery( ".slider" ).slider({
    value:0,
    min: 0,
    max: totalImages * totalImages,
    step: totalImages,
    slide: function( event, ui ) {
        if(ui.value > prevValue){
            jQuery("#next").click();

        }
        else if(ui.value<prevValue){
            jQuery("#prev").click();
        }
        prevValue=ui.value;
    }
});

jQuery(".slider a").focusin("click", function(){
    jQuery('#gallery').cycle("pause");
});

});
/* ]]> */
//-->
</script>
于 2012-11-03T10:43:38.547 回答