JQuery цикл слайд-шоу навигации автозапуска - хотите, чтобы анимация запускалась без какого-либо события клика - PullRequest
Новая
       22

JQuery цикл слайд-шоу навигации автозапуска - хотите, чтобы анимация запускалась без какого-либо события клика

0 голосов
/ 07 сентября 2011

У меня есть слайд-шоу 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>

1 Ответ

0 голосов
/ 07 сентября 2011

Плагин цикла имеет опции, позволяющие вам устанавливать обратные вызовы - onPagerEvent и onPrevNextEvent. Я бы использовал эти обратные вызовы для создания дополнительной анимации.

Варианты цикла: http://jquery.malsup.com/cycle/options.html

...