jquery循環幻燈片導航自動播放 - 希望動畫沒有任何點擊事件觸發

我有一個Jquery循環幻燈片，具有點擊功能，以動畫瀏覽器導航。這適用於幻燈片是手動的。我現在希望幻燈片自動運行，並且頁面導航可以隨着幻燈片圖像的更改而生成動畫。這是一個手動點擊的代碼，但現在我已經設置幻燈片自動運行此代碼不會得到動作。我需要做什麼改變來獲得事件發生jquery循環幻燈片導航自動播放 - 希望動畫沒有任何點擊事件觸發

<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>

來源

2011-09-07 Horse_WA