1

我正在研究 Jquery 轮播，我有一个功能，它可以在鼠标上滑动图像但它只滑动一次，我必须应用它在鼠标悬停时连续开始滑动图像并且在鼠标移出时停止滑动的功能。我已经使用了间隔并在 1.5 分钟后调用了 mouseover 事件，但是我有两个问题第一个它挂起浏览器第二个即使在鼠标移出时它仍然在滑动（我已经尝试在 mouseout 上清除间隔但没有工作）下面是我的代码旋转木马

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