Jquery 循环幻灯片导航自动播放 - 希望动画在没有任何点击事件的情况下触发答案

【问题标题】：Jquery cycle slideshow navigation autoplay - want animate to fire without any click eventJquery 循环幻灯片导航自动播放 - 希望动画在没有任何点击事件的情况下触发
【发布时间】：2011-09-07 02:22:05
【问题描述】：

我有一个 Jquery Cycle 幻灯片，它有一个点击功能来动画一个寻呼机导航。如果幻灯片是手动的，则此方法有效。我现在希望幻灯片自动运行，并且寻呼机导航随着幻灯片图像的变化而动画。这是可以手动单击的代码，但现在我已将幻灯片设置为自动运行，此代码不会被执行。我需要改变什么才能让事件发生

<script type="text/javascript">
        //<![CDATA]
        $(function(){
           //  nav animation2  
        $('#nav_move').css({
        width: 16,
        height: 16
        });

        $('#navi a').click(function() {
        var offset = $(this).offset();
        var offsetbody= $('#nav').offset();
        //find the offset of the wrapping div    
        $('#nav_move').animate({
            width: $(this).width()+7,
            height: 16,
            left: (offset.left-offsetbody.left-1.2)
        });
        return false;
        });        
    });
        //]]>
        </script>

这是页面的代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <meta name="author" content="Michael Horsfall" />

    <title>Client Slideshow</title>

    <script src="modules/mod_clients_slideshow/js/jquery-1.6.2.min.js" type="text/javascript"></script>
    <script src="modules/mod_clients_slideshow/js/jquery.cycle.all.js" type="text/javascript"></script>
    <script src="modules/mod_clients_slideshow/js/preloadCssImages.jQuery_v5.js" type="text/javascript"></script>

    <script type="text/javascript">
    $(document).ready(function(){
    $.preloadCssImages();
    });
    </script>


    <script type="text/javascript">
        $(document).ready(function(){
        $('#myslides').cycle({
            fx: '<?php echo $effectFx; ?>',
            speed: <?php echo $speed; ?>,
            timeout: 1000,
            nowrap: 0,
            fit: 1,
            pause: 2,
            pager: '#navi'
        });
        $('#nav .next a').click(function(){
        var nextClick = $('#navi a.activeSlide').next('a');
        $(nextClick).click();
        return false;
        })
        // back arrow
        $('#nav .prev a').click(function(){
        var prevClick = $('#navi a.activeSlide').prev('a');
        $(prevClick).click();
        return false;
        })
        });
    </script>
    <script type="text/javascript">
    //<![CDATA]
    $(function(){
       //  nav animation2  
    $('#nav_move').css({
    width: 16,
    height: 16
    });

    $('#navi a').click(function() {
    var offset = $(this).offset();
    var offsetbody= $('#nav').offset();
    //find the offset of the wrapping div    
    $('#nav_move').animate({
        width: $(this).width()+7,
        height: 16,
        left: (offset.left-offsetbody.left-1.2)
    });
    return false;
    });        
});
    //]]>
    </script>

    <link rel="stylesheet" href="modules/mod_clients_slideshow/css/style.css" type="text/css" media="screen" />
</head>

<body>
<div id="container">
<h1>
<?php

try {       
    // Styling for images   
    echo "<div id=\"myslides\">";

    $files = new DirectoryIterator($imageFolder);
    $i=0;
    $files_array = array();
    foreach ($files as $fileinfo){
        if ($fileinfo->isFile()){
        $files_array[$i++]=$fileinfo->getFileName();
        }
    }
    asort($files_array);
    foreach ( $files_array as $file ) {         
            $path = $imageFolder . "/" . $file;
            $fileBaseName=basename($path,".jpg");
            $trimmed=substr($fileBaseName,2);
            echo "<img src=\"" . $path . "\" alt=\"" . $trimmed . "\" />";  
        }
    echo "</div>";
}   
catch(Exception $e) {
    echo 'No images found for this slideshow.<br />';   
}
?>
</h1>
</div>
<div id="nav" class="nav">

<span id="nav_move"></span>
<div id="navi" class="navi">
</div>

</div>


</body>
</html>

【问题讨论】：

标签： jquery navigation click jquery-animate cycle

【解决方案1】：

循环插件具有允许您设置回调的选项 - onPagerEvent 和 onPrevNextEvent。我会使用这些回调来做额外的动画。

循环选项：http://jquery.malsup.com/cycle/options.html

【讨论】：