1

私はJqueryカルーセルに取り組んでいます。マウスオーバーで画像をスライドさせる機能がありますが、スライドは1回だけです。マウスオーバーで画像のスライドを継続的に開始し、マウスアウトでスライドを停止する機能を適用する必要があります。私は間隔を使用し、1.5分後にマウスオーバーイベントを呼び出しましたが、2つの問題があります.1つ目はブラウザをハングさせます.2つ目はマウスアウトでもまだスライドしています（マウスアウトで間隔をクリアしようとしましたが、機能しませんでした）以下は私のコードですカルーセル

       $(document).ready(function () {
  $('#carousel_ul_3 li:first').before($('#carousel_ul_3 li:last'));
            $('#right_scroll_3 img').mouseover(function () {   
                //get the width of the items ( i like making the jquery part dynamic, so if you change the width in the css you won't have o change it here too ) '
                var item_width = $('#carousel_ul_3 li').outerWidth() + 10;

                //calculae the new left indent of the unordered list
                var left_indent = parseInt($('#carousel_ul_3').css('left')) - item_width;
                //make the sliding effect using jquery's anumate function '            
                $('#carousel_ul:not(:animated)').animate({ 'left': left_indent }, 500, function () {

                    //get the first list item and put it after the last list item (that's how the infinite effects is made) '
                    $('#carousel_ul_3 li:last').after($('#carousel_ul_3 li:first'));

                    //and get the left indent to the default -210px
                    $('#carousel_ul_3').css({ 'left': '-210px' });

                });
                window.setInterval(event_3, 1500); //Setting Interval


            });

            $('#right_scroll_3 img').mouseout(function () {
               clearInterval
            });

            //when user clicks the image for sliding left
            $('#left_scroll_3 img').mouseover(function () {

                var item_width = $('#carousel_ul_3 li').outerWidth() + 10;

                /* same as for sliding right except that it's current left indent + the item width (for the sliding right it's - item_width) */
                var left_indent = parseInt($('#carousel_ul_3').css('left')) + item_width;

                $('#carousel_ul_3:not(:animated)').animate({ 'left': left_indent }, 500, function () {

                    /* when sliding to left we are moving the last item before the first list item */
                    $('#carousel_ul_3 li:first').before($('#carousel_ul_3 li:last'));

                    /* and again, when we make that change we are setting the left indent of our unordered list to the default -210px */
                    $('#carousel_ul_3').css({ 'left': '-210px' });
                });
                window.setInterval(event_3, 1500);//Setting Interval

            });
});




 function event_3() {
            $("#right_scroll_3 img").mouseover();
            $('#left_scroll_3 img').mouseover();
        }

マウスオーバーでカルーセルを継続的にスライドさせ、マウスリーブで停止するにはどうすればよいですか?

4

0 に答える 0