鼠标悬停时应停止幻灯片放映

Question

我尝试过像http://www.related.com/这样的幻灯片。 我可以成功实现它。我试图停止鼠标悬停幻灯片播放并在鼠标移开时播放幻灯片。我不能这样做。请遵守代码。

<script type="text/javascript">

    objJson_pageAnimation = {


    'slideItems': [ <?php
        global $post;
        $args = array(  'category' => 3 );
        $myposts = get_posts( $args );

        foreach( $myposts as $post ) :  setup_postdata($post); ?>

        <?php $img = get_post_meta($post->ID, 'SlideImage',true);
         $content = get_the_content();


         ?>
    <?php echo $con; ?>{'imgUrl': '<?php echo $img; ?>','imgHead': '<?php the_title(); ?>','imgSubHead': '<?php echo $content ?>','targetUrl': '#','xPos': '0px','yPos': '<?php echo rand(10, 50); ?>px','x2Pos': '0px','y2Pos': '0px','imgTitle': '','align': 'left'}<?php
$con = ',';
endforeach; ?>

]}
    function loadPageAnimation() {

        var arrSlides = objJson_pageAnimation.slideItems;

        var strData = "";



        for (var i = 0; i < arrSlides.length; i++) {

            strData += '<div class="rotator">';

            strData += '<img class="imgBig" src="' + arrSlides[i].imgUrl + '" border="0" alt="' + arrSlides[i].imgHead + '" title="' + arrSlides[i].imgTitle + '" />';

            strData += '<div class="navigation">';



            for (var j = 0; j < arrSlides.length; j++) {

                strData += (j == i) ? '<div class="current">' + (j + 1) + '</div>' : '<a href="javascript:void(0);">' + (j + 1) + '</a>';

            }



            strData += '</div>';

//            strData += '<div class="txtHeadNew" style="border-bottom: White 1px solid;left:' + arrSlides[i].xPos + '; top: ' + arrSlides[i].yPos + '; text-align:' + arrSlides[i].align + '"><div>' + arrSlides[i].imgHead + '</div></div>';

//            strData += '<div class="txtSubHeadNew" style="position: relative; right:' + arrSlides[i].x2Pos + '; top:' +  arrSlides[i].y2Pos + '"><div>' + arrSlides[i].imgSubHead + '</div></div>';



            strData += '<div class="txtHeadNew" style="left:' + arrSlides[i].xPos + '; top: ' + arrSlides[i].yPos + '; text-align:' + arrSlides[i].align + '"><div Style="border-bottom-color: white; border-bottom-width: 1px; border-bottom-style: solid; Padding-bottom:10px;">' + arrSlides[i].imgHead + '</div></div>';

//            strData += '<div class="txtSubHeadNew" style="display:block; position:absolute; Padding-top:10px;"><div><a href="' + arrSlides[i].targetUrl + '">' + arrSlides[i].imgSubHead + '</a><a class="mylinkButton" href="' + arrSlides[i].targetUrl + '"></a></div></div>';

            strData += '<div class="txtSubHeadNew" style="position:absolute; right:' + arrSlides[i].x2Pos + '; Padding-top:10px; text-align:' + arrSlides[i].align + '"><div><table cellspacing="0" cellpadding="0" border="0"><tr><td><a href="' + arrSlides[i].targetUrl + '">' + arrSlides[i].imgSubHead + '</a></td><td style = "v-align: middle; padding-top :10px;"><a class="mylinkButton" href="' + arrSlides[i].targetUrl + '"></a></td></tr></table></div></div>';

            strData += '</div>';

           // strData += '<script>var p = $("txtHeadNewID' + i.toString() +'"); var offset = p.offset(); var q = $("txtHeadSubNewID' + i.toString() + '"); q.css( "left: "' + 'offset.left' + '", top: "' + 'offset.top' + ');<' + '/script>';

        }

        $("#areaPageAnimation").append(strData);

        page.init();

    }



    //START: document ready

    $(document).ready(function () {

        //loads the only logo and launch button to the base page

        // $('#mainContainer').load('/destinations/hudsonyards/logoandlaunch.html');



        loadPageAnimation();



        /* Apart from clicking Launch Site the user has requested that the site should 

        launch by clicking on any image of the slideshow 14Dec2010 */

        $("#areaPageAnimation").click(function () {

            // $('#mainContainer').fadeOut('fast', function () { $('#mainContainer').load('/destinations/hudsonyards/hudson_yards_overlay_base.html'); });

            //$('#mainContainer').fadeIn('slow');

        });


/*$('#areaPageAnimation').hover(function() {
page.stopshow();
}, function() {

});*/

$("#areaPageAnimation").mouseover(function (){
alert('hai')
$('#mainContainer').stop(true,true).fadeIn('slow');
$('#mainContainer').stop(true,true).fadeOut('fast');
});


    });

    //END: document read

</script>